CSS入门

CSS简介

网页分成三个部分

  • 结构(HTML)
  • 表现(CSS)
  • 行为(JavaScript)

CSS

  • 层叠样式表
  • 网页实际上是一个多层的结构,通过CSS可以分别为网页的每一个层来设置样式。而最终我们能看到只是网页的最上边一层
  • 总之一句话,CSS用来设置网页中元素的样式

CSS编写的位置

第一种方式(内联样式,行内样式)

  • 在标签内部通过style属性来设置元素的样式;
  • 注意:开发时绝对不要使用内联样式。

问题:
使用内联样式,样式只能对一个标签生效,如果希望影响到多个元素必须在每一个元素中都复制一遍
并且当样式发生变化时,我们必须要一个一个的修改,非常的不方便。

<p style="color:red; font-size: 60px;">少小离家老大回,乡音无改鬓毛衰</p>
<p style="color: red; font-size: 60px;">今天天气真不错!</p>

第二种方式(内部样式表)

  • 将样式编写到head中的style标签里,然后通过CSS的选择器来选中元素并为其设置各种样式,可以同时为多个标签设置样式,并且修改时只需要修改一处即可全部应用。
  • 内部样式表更加方便对样式进行复用

问题:
我们的内部样式表只能对一个网页起作用,它里边的样式不能跨页面进行复用。

<style>

    p{
        color: green;
        font-size: 50px;
    }

</style>

第三种方式(外部样式表)最佳实践

  • 可以将CSS样式编写到一个外部的CSS文件中,然后通过link标签来引入外部的CSS文件。
  • 外部样式表需要通过link标签进行引入,意味着只要想使用这些样式的网页都可以对其进行引用。使样式可以在不同页面之间进行复用。
  • 将样式编写到外部的CSS文件中,可以使用到浏览器的缓存机制,从而加快网页的加载速度,提高用户的体验。
<link rel="stylesheet" href="./style.css">

CSS的基本语法

CSS中的注释,注释中的内容会自动被浏览器所忽略。

CSS的基本语法:选择器 声明块

选择器,通过选择器可以选中页面中的指定元素。比如p的作用就是选中页面中所有的p元素。声明块,通过声明块来指定要为元素设置的样式。

声明块由一个一个的声明组成,声明是一个名值对结构。一个样式名对应一个样式值,名和值之间以:连接,以;结尾。

<style>
  p{
      color: red;
      font-size: 40px;
  }

  h1{
      color: green;
  }
</style>

常用选择器

将所有的段落设置为红色(字体)

元素选择器

  • 作用:根据标签名来选中指定的元素
  • 语法:标签名{}
  • 例子:p{} h1{} div{}
 p{
    color: red;
}

h1{
    color: green;
}

id选择器

  • 作用:根据元素的id属性值选中一个元素
  • 语法:#id属性值{}
  • 例子:#box{} #red{}
#red{
    color: red;
}

类选择器

  • 作用:根据元素的class属性值选中一组元素
  • 语法:.class属性值

class是一个标签的属性,它和id类似,不同的是class可以重复使用。可以通过class属性来为元素分组,
可以同时为一个元素指定多个class属性。

 .blue{
    color: blue;
}

.abc{
    font-size: 20px;
}

通配选择器

  • 作用:选中页面中的所有元素
  • 语法:*
*{
    color: red;
}

复合选择器

交集选择器

  • 作用:选中同时复合多个条件的元素
  • 语法:选择器1选择器2选择器3选择器n{}
  • 注意点:
    交集选择器中如果有元素选择器,必须使用元素选择器开头。

classred的元素设置为红色(字体)

.red{
            color: red;
        }

classreddiv字体大小设置为30px

div.red{
    font-size: 30px;
}

.a.b.c{
    color: blue
}

选择器分组(并集选择器)

  • 作用:同时选择多个选择器对应的元素
  • 语法:选择器1,选择器2,选择器3,选择器n{}
#b1,.p1,h1,span,div.red{}

关系选择器

父元素

  • 直接包含子元素的元素叫做父元素

子元素

  • 直接被父元素包含的元素是子元素

祖先元素

  • 直接或间接包含后代元素的元素叫做祖先元素
  • 一个元素的父元素也是它的祖先元素

后代元素

  • 直接或间接被祖先元素包含的元素叫做后代元素
  • 子元素也是后代元素

兄弟元素

  • 拥有相同父元素的元素是兄弟元素

div的子元素span设置一个字体颜色红色。(为div直接包含的span设置一个字体颜色)。

子元素选择器

  • 作用:选中指定父元素的指定子元素
  • 语法:父元素 > 子元素
div.box > span{
            color: orange;
        }

后代元素选择器

  • 作用:选中指定元素内的指定后代元素
  • 语法:祖先 后代
div > p > span{
             color: red;
         }

选择下一个兄弟

  • 语法:前一个 + 下一个

选择下边所有的兄弟

  • 语法:兄 ~ 弟
p + span{
              color: red;
          }

p ~ span{
  color: red;
}

属性选择器

[属性名]:选择含有指定属性的元素
[属性名=属性值]:选择含有指定属性和属性值的元素
[属性名^=属性值]:选择属性值以指定值开头的元素
[属性名$=属性值]:选择属性值以指定值结尾的元素
[属性名*=属性值]:选择属性值中含有某值的元素的元素

p[title]{}
p[title=abc]{}
p[title^=abc]{}
p[title$=abc]{}
<head>
    <style>
        p[title*=e]{
            color: orange;
        }
    </style>
</head>
<body>
        <p title="abc">少小离家老大回</p>
        <p title="abcdef">乡音无改鬓毛衰</p>
        <p title="helloabc">儿童相见不相识</p>
        <p>笑问客从何处来</p>
        <p>秋水共长天一色</p>
        <p>落霞与孤鹜齐飞</p>
</body>

伪类选择器

伪类(不存在的类,特殊的类)。

  • 伪类用来描述一个元素的特殊状态。比如:第一个子元素、被点击的元素、鼠标移入的元素…

  • 伪类一般情况下都是使用:开头

  • :first-child第一个子元素

  • :last-child最后一个子元素

  • :nth-child()选中第n个子元素

    • 特殊值:
      n第n个 n的范围0到正无穷
      2neven 表示选中偶数位的元素
      2n+1odd 表示选中奇数位的元素
    • 以上这些伪类都是根据所有的子元素进行排序
  • :first-of-type

  • :last-of-type

  • :nth-of-type()

    • 这几个伪类的功能和上述的类似,不通点是他们是在同类型元素中进行排序
  • :not() 否定伪类

  • 将符合条件的元素从选择器中去除

     ul > li:first-child{
        color: red;
    } 
        
     ul > li:last-child{
        color: red;
    } 
    
     ul > li:nth-child(2n+1){
        color: red;
    } 
    
     ul > li:nth-child(even){
        color: red;
    } 
    
     ul > li:first-of-type{
        color: red;
    } 
    
    ul > li:not(:nth-of-type(3)){
        color: yellowgreen;
    }

超链接的伪类

:link 用来表示没访问过的链接(正常的链接);
:visited用来表示访问过的链接,由于隐私的原因,所以visited这个伪类只能修改链接的颜色;
:hover用来表示鼠标移入的状态;
:active 用来表示鼠标点击。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        a:link{
            color: red;
            
        }

        a:visited{
            color: orange; 
            /* font-size: 50px;   */
        }
       
         a:hover{
             color: aqua;
             font-size: 50px;
         }
       
         a:active{
             color: yellowgreen;
             
         }
    </style>
</head>
<body>

    <a href="https://www.baidu.com">访问过的链接</a>
    <br><br>
    <a href="https://www.baidu123.com">没访问过的链接</a>
    
</body>

伪元素

伪元素,表示页面中一些特殊的并不真实的存在的元素(特殊的位置)。
伪元素使用:: 开头

::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 元素的开始
::after 元素的最后

  • beforeafter 必须结合content属性来使用
p::first-letter{
    font-size: 50px;
}

p::first-line{
    background-color: yellow; 
}

p::selection{
    background-color: greenyellow;
}

div::before{
    content: '『';
 }

div::after{
    content: '』';
}

继承

样式的继承,我们为一个元素设置的样式同时也会应用到它的后代元素上。继承是发生在祖先后后代之间的,继承的设计是为了方便我们的开发。

利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上,这样只需设置一次即可让所有的元素都具有该样式。

注意:并不是所有的样式都会被继承,比如背景相关的,布局相关等的这些样式都不会被继承。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        p{
            color: red;
            background-color: orange;
        }

        div{
            color: yellowgreen
        }
    
    </style>
</head>
<body>
    <p>
        我是一个p元素
        <span>我是p元素中的span</span>
    </p>

    <span>我是p元素外的span</span>

    <div>
        我是div
        <span>
            我是div中的span
            <em>我是span中的em</em>
        </span>
    </div>
</body>
</html>

选择器的权重

样式的冲突

  • 当我们通过不同的选择器,选中相同的元素,并且为相同的样式设置不同的值时,此时就发生了样式的冲突。

发生样式冲突时,应用哪个样式由选择器的权重(优先级)决定。

选择器的权重

  • 内联样式:1000
  • id选择器:0100
  • 类和伪类选择器:0010
  • 元素选择器:0001
  • 通配选择器:0000
  • 继承的样式:没有优先级

比较优先级时,需要将所有的选择器的优先级进行相加计算,最后优先级越高,则越优先显示(分组选择器是单独计算的),选择器的累加不会超过其最大的数量级,类选择器在高也不会超过id选择器。

如果优先级计算后相同,此时则优先使用靠下的样式。可以在某一个样式的后边添加 !important ,则此时该样式会获取到最高的优先级,甚至超过内联样式。

注意:在开发中这个玩意一定要慎用!

长度单位

像素

  • 屏幕(显示器)实际上是由一个一个的小点点构成的;
  • 不同屏幕的像素大小是不同的,像素越小的屏幕显示的效果越清晰;
  • 所以同样的200px在不同的设备下显示效果不一样。

百分比

  • 也可以将属性值设置为相对于其父元素属性的百分比;
  • 设置百分比可以使子元素跟随父元素的改变而改变。

em

  • em是相对于元素的字体大小来计算的
  • 1em = 1font-size
  • em会根据字体大小的改变而改变

rem

  • rem是相对于根元素的字体大小来计算

颜色单位

在CSS中可以直接使用颜色名来设置各种颜色,比如:red、orange、yellow、blue、green … …
但是在css中直接使用颜色名是非常的不方便。

RGB值

  • RGB通过三种颜色的不同浓度来调配出不同的颜色
  • R red,G green ,B blue
  • 每一种颜色的范围在 0 - 255(0% - 100%) 之间
  • 语法:RGB(红色,绿色,蓝色)

RGBA

  • 就是在rgb的基础上增加了一个a表示不透明度
  • 需要四个值,前三个和rgb一样,第四个表示不透明度
  • 1表示完全不透明 0表示完全透明 .5半透明

十六进制的RGB值

  • 语法:#红色绿色蓝色
  • 颜色浓度通过 00-ff
  • 如果颜色两位两位重复可以进行简写
    #aabbcc --> #abc

HSL值 HSLA值

  • H 色相(0 - 360)
  • S 饱和度,颜色的浓度 0% - 100%
  • L 亮度,颜色的亮度 0% - 100%
    <style>
        .box1{
            background-color: red;
            background-color: rgb(255, 0, 0);
            background-color: rgb(0, 255, 0);
            background-color: rgb(0, 0, 255);
            background-color: rgb(255,255,255);
            background-color: rgb(106,153,85);
            background-color: rgba(106,153,85,.5);
            background-color: #ff0000;
            background-color: #ffff00;
            background-color: #ff0;
            background-color: #bbffaa;
            background-color: #9CDCFE;
            background-color: rgb(254, 156, 156);
            background-color: hsla(98, 48%, 40%, 0.658);
        }
    </style>
<body>
    
    <div class="box1"></div>

</body>

本博客所有文章除特别声明外,均采用 CC BY-SA 3.0协议 。转载请注明出处!