CSS基本语法，属性，选择器，权重，单位

最新推荐文章于 2024-08-09 11:34:51 发布

开到荼蘼223's

最新推荐文章于 2024-08-09 11:34:51 发布

阅读量363

点赞数 1

分类专栏： HTML CSS 文章标签： css html javascript css3

本文链接：https://blog.csdn.net/m0_56649557/article/details/116290824

版权

HTML 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

CSS

7 篇文章 0 订阅

订阅专栏

CSS

CSS层叠样式表用来对搭建的网页骨架添加样式效果，提高用户的使用体验。网页实际是一个多层的结构，通过css可以通过分别为网页的每一个层来设置样式，而最终我们看到的是网页的最上边一层。

CSS基本语法:

css基本语法:选择器声明块

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

其中p就是选择器后面跟着的大括号就是声明块，通过选择器可以选中页面中的指定元素，以上p的作用就是选中页面中所有的p元素。
声明块,通过声明块来指定要为元素设置的样式，声明块由一个一个的声明组成，声明是一个名值对结构，一个样式名对应一个样式值,名和值之间以:连接,以;结尾。

CSS使用方法

内联样式

在标签内部通过style属性来设置元素的样式，使用内联样式只能对一个标签生效。

 <p style="color:brown;font-size: 20px;">今天天气真不错<p>

缺点：如果影响到多个元素必须在每一个元素中都复制一遍，不便维护。

内部样式表

将样式编写到head中的style标签里，然后通过css选择器来选中元素并为其设置各种样式，可以同时为多个样式设置样式,并且修改时只需要修改一处即可全部修改。

    <style>
        p{
            color:blue;
            font-size: 55px;
        }
    </style>

缺点：内部样式表只能对一个网页起作用不能跨页面起作用。

引入外部样式表

可以将CSS样式编写在一个外部的css文件，然后通过link标签来引入外部的css文件外部样式表，通过link标签进行引入意味着只要想使用这些样式的网页都可以对其进行引用将样式。

    <link rel="stylesheet" href="./style.css">

优点：编写在外部的css文件中,可以使用到浏览器的缓存机制从而加快网页的加载速度,提高用户体验。

CSS常用选择器

元素选择器

元素选择器
作用：根据标签来选中指定的元素
语法：标签名{ }

	 p{
	      color:blue;
	      font-size: 55px;
	      }

id选择器

id选择器
作用：根据元素的id属性值选中一个元素
语法：#id属性值{ }

  #red{
          color:red;
      	  }

标签里面写 id=‘属性值’
在style样式中通过 ‘#"属性值’’{ }'使用
注意：id属性值不能重复

类选择器

类选择器
作用：根据元素的class属性值选中一组元素
语法：.class属性值{ }

.abc{
        font-size: 20px;
      }

通配选择器

通配选择器
作用：选中页面中的所有元素
语法：*{ }

*{
   padding: 0;
   margin: 0;
   }

复合选择器

交集选择器

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

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

分组选择器（并集选择器）

作用：同时选用多个选择器对应的元素
语法：选择器1,选择器2,选择器3{ }

        h1,span{
            color:rgb(107, 38, 172);
        }

关系选择器

父元素：直接包含子元素的叫父元素
子元素：直接被父元素包含的元素叫子元素
祖先元素：直接或间接包含后代元素叫祖先元素
后代元素：直接或间接被祖先元素包含的元素叫后代元素
兄弟元素：拥有相同父元素的元素叫兄弟元素

子元素选择器

作用:选中指定元素的指定元素
语法:父元素 > 子元素

div > span{
            color:orange；
            }

后代元素选择器

作用:选中指定元素内的指定后代元素
语法:祖先后代

div span{
            color: orchid;
        }

兄弟选择器

语法:前一个 + 下一个
选择下面所有兄弟
语法:兄 ~ 弟

        p + span{
            color:orchid；
        }
        p ~ span{
            color:red；
        }

属性选择器

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

        p[title*="e"]{
            color:orchid；
        }

<body>
    <p title="abc">少小离家老大回</p>
    <p title="abcdef">乡音未改鬓毛催</p>
    <p title="hello">儿童相见不相识</p>
    <p title="hel">笑问客从何处来</p>
    <p>秋水共长天一色</p>
    <p>落霞与孤鹜齐飞</p>
</body>

伪类选择器

伪类(不存在的类,特殊的类)，伪类用来描述一个元素的特殊状态。

比如,第一个子元素,被点击的元素,鼠标移入的元素…
伪类一般都是使用:开头
:first-child
:last-child
:nth-child()选中第n个子元素
特殊值:n 第n个 n的范围0到正无穷
2n表示偶数位的元素
2n+1或odd表示奇数位的元素
even表示偶数位的元素
以上这些伪类都是根据所有的子元素进行排序

 ul > li:first-child{
            color:red;
        }

选中ul第一个子元素，修改颜色为红色。

:first-of-type
:last-of-type
:nth-of-type()

这几个伪类的功能和上述的类似,不同点是他们是在同类型元素中进行排序

ul > li:nth-of-type(1){
            color:red
        }

选中ul中li类的第一个元素，修改颜色为红色。

:not()否定伪类
-将符合条件的元素从选择器中去除

a元素的伪类

:link用来表示没有访问过的链接(正常的链接)

            a:link{
                color:red;
                font-size: 50px;
            }

:visited用来表示访问过的链接

            a:visited{
                font-size: 50px;
                color:green;
            }

由于隐私的原因,所以visited这个伪类只能修改颜色,开发中用的并不多

:hover用来表示鼠标移入的状态

         a:hover{
             color:blue;
             font-size: 50px;
         }

:active用来表示鼠标点击

         a:active{
             color:indianred
         }

伪元素选择器
伪元素,表示页面中一些特殊的并不存在的元素(特殊的位置)

伪元素使用一些::开头
::first-letter表示第一个字母
::first-line表示第一行
::selection表示选中的内容
::before表示元素起始
::after表示元素最后
（before和after必须结合content属性来使用）

.clearfix::before,
.clearfix::after{
    content:'';
    display: table;
    clear:both;
}

样式的继承

我们为一个元素设置样式也会被它的后代继承，继承是发生在祖先和后代的，颜色字体等都会被继承。
注意:不是所有样式都会被继承比如背景相关的,布局相关的这些样式都不会被继承。

选择器权重

当我们选择不同的选择器,选中相同的元素,并且为相同样式设置不同的值,此时就发生样式的冲突
发生样式冲突时，由我们选择器权重（优先级）决定
选择器的权重

内联样式 1000
id选择器 100
类和伪类选择器 10
元素选择器 1
通配选择器 0
继承的样式没有优先级

单位

长度单位：像素
屏幕（显示器）实际上由一个一个小点点组成，不同屏幕的像素大小是不同的，像素越大的屏幕显示的效果越清晰，同样的200px在不同的设备下显示效果不一样

可以将属性值设置为相对于其父元素属性的百分比

        .box1{
            width:200px;
            height:200px;
            background-color: red;
        }
        .box2{
            width:50%;
            height:50%;
            background-color: blue;
        }

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

颜色

在CSS中可以直接使用颜色名来设置各种颜色
比如：red,orange,blue,yellow
但是在css中使用颜色名是非常不方便，因此可以引入颜色单位

RGB值
RGB通过三种颜色浓度来调配出不同的颜色
R RED G GREEN B BLUE
每一种颜色的范围0-255（0%-100%）之间
语法RGB
RGBA
在rgb上增加透明度，第四个表示不透明度
1表示完全不透明 0表示完全透明 .5表示半透明
十六进制的RGB值
-语法，#红色绿色蓝色
-颜色浓度通过00-ff
-如果颜色两位两位重复可以进行简写
#aabbcc=#abc
HSL和HSLA
H 色相（0-360）
S 饱和度颜色浓度 0%-100%
L 亮度 0%-100%