CSS引入方式、选择器、选择器的优先级、CSS长度单位、颜色单位、字体样式、文本样式、伪类样式、列表样式、背景属性

ゞ浴缸里的玫瑰 2022-08-31 11:04 136阅读 0赞

# CSS引入方式、选择器、选择器的优先级、CSS长度单位、颜色单位、字体样式、文本样式、伪类样式、列表样式、背景属性 #

### 文章目录 ###

*  CSS引入方式、选择器、选择器的优先级、CSS长度单位、颜色单位、字体样式、文本样式、伪类样式、列表样式、背景属性
 *   *   *  CSS
         *   *   *  CSS含义
                 *  CSS引入
                 *  CSS语法
         *  CSS选择器
         *  选择器的优先级
         *  CSS长度单位
         *  CSS颜色单位
         *  CSS字体样式
         *  CSS文本样式
         *  伪类样式
         *  CSS列表样式
         *  CSS背景属性
         *  浏览器前缀

### CSS ###

##### CSS含义 #####

css含义：层叠样式表（Cascading style sheets）

作用：修饰页面中的标签，如颜色、大小、间距等，对页面的元素进行定位和布局

含义：所谓层叠，可以将网页想像成一层一层的结构，层次高的样式会覆盖层次低的样式，我们的CSS可以为每一层设置不同的样式，处于文档最底层被称为文档流，元素默认都在文档流存放。

##### CSS引入 #####

*  行内样式(内联样式)：将style属性+样式写入具体的html标签中的方式，称为内联样式，所用范围为当前标签，内联样式不能重复使用，内联样式将结构和表现进行绑定，耦合度高，不方便后期维护
 *  内部样式:使用style标签写在head标签内，所用范围，当前页面。
 *  外部样式：单独使用后缀名为.css的文件来 写样式，在当前页面中使用link标签引入外部样式，所有页面都可以共享样式，有利于重复使用，在开发中推荐。结构和表现分离，有助于后期维护。

##### CSS语法 #####

CSS语法结构：选择器+声明块

选择器：通过选择器可以找到页面中需要修饰的元素

选择器\{样式名:样式值;\}多个样式可以使用分号隔开

CSS注释和HTML标签注释作用相同，都是解释说明当前代码的作用

### CSS选择器 ###

*  元素选择器（标签选择器）
    
    表示页面中所有的标签
 *  ID选择器
    
    通过元素的ID可以 选择唯一的元素，ID值在当前页面不能重复
    
    语法：\#ID值\{ 样式名称:样式值; \}
 *  类选择器
    
    使用标签的class属性为标签进行分组，属性值相同为一组，通过元素的class属性选中一组元素进行修饰
    
    语法：.类名\{ 样式名称:样式值;\}
 *  并集选择器
    
    使用选择器分组可以同时选择多个选择器对应的元素
    
    语法：选择器1,选择器2,选择器3\{ 样式名称:样式值;\}
 *  通配符选择器
    
    选择页面中所有的元素
    
    语法：\*\{ 样式选择器:样式值\}
 *  交集选择器（复合选择器）
    
    选择div标签并且class值为d1的元素，可以选择同时满足多个选择器的元素。
    
    语法：选择器1选择器2\{ 样式名称:样式值;\}
    
    两个选择器直接相连，中间没有任何符号
 *  伪元素选择器
    
    ::first-letter\{\};元素的第一个字符修改样式。仅适用于块级元素中
    
    ::first-line\{\};元素的第一行修改样式。仅适用于块级元素
    
    伪元素表示标签中的内容，不是标签的状态。
    
    ::before表示在元素的最前面
    
    ::after表示在元素的最后面
 *  子元素和后代选择器
    
     *  在html中元素之间存在层次关系：
        
        子父关系：子元素和父元素。
        
        兄弟关系：兄弟元素之间。
        
        祖先元素：父元素也是一种祖先元素
        
        后代元素
     *  后代选择器：指定元素的所有后代元素
        
        语法：祖先元素 后代元素\{ \}
    
    div.c1\{\}表示div标签且类名为c1的元素
    
    div .c1\{\}表示div标签中的所有类名为c1的子元素
    
     *  子元素选择器
        
        body下的p标签，且为body的子元素（排除其它后代元素）
        
        body> p\{\}
 *  属性选择器
    
     *  title标签：表示鼠标移动到该元素后标签的提示信息
    
    p\[title\]\{\};修改所有带title属性的p标签的title属性
    
    \[属性名称\]；选取所有含有该属性名称的元素
    
    p\[title=‘喜欢’\]\{\}；修改所有含有title属性且值为喜欢的p标签的属性。
    
    p\[属性名^=‘属性值’\];选取含有指定属性值开头的属性名的元素。
    
    p\[属性名$=‘属性值’\];选取含有指定属性值结尾的属性名的元素。
    
    p\[属性名\*=‘属性值’\];选取含有指定属性值的属性名的元素。
 *  子元素伪类选择器
    
    body p:first-child可以理解为body标签下的第一个子元素且同时元素为p标签
    
    p:first-child可以理解为父元素标签下的第一个子元素且同时元素为p标签
 *  后一个兄弟选择器：span后一个兄弟节点，而且是紧挨着的元素
    
    span+选择器\{\}
    
    后兄弟选择器：span标签之后的所有的兄弟元素
    
    span~选择器\{\}
 *  否定伪类，可以从已经选择的元素中剔除某些元素
    
    选择器:not(选择器)
 *  样式的继承：子元素的样式可以继承父元素的样式
    
    祖先元素的样式，后代元素有可能会继承
    
    不是所有的样式都拥有继承性
    
    ### 选择器的优先级 ###
    
    不同的样式使用到同一个元素中，根据选择器 的优先级，优先级高的起作用。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]

当不同类型的选择器叠加使用时，权重相加，大的结果起作用。

相同层级的权重相加不能超过当前层级–权重相加不进位

权重相同按顺序执行

使用并集选择器，优先级不相加，优先级单独计算。

继承没有优先级，通配符优先级为0，因此有继承和通配符两个属性时，优先级为通配符选择器

### CSS长度单位 ###

*  像素px
    
    屏幕中每个发光的小点，可以理解为像素，屏幕都是由这些像素点构成的。
    
    1600\*900表示横向1600个像素点，纵向900个像素点。
    
    显示越清晰，像素越小，反之显示越模糊，像素越大。
    
    我们平时CSS样式中设置的像素成为css像素，屏幕本身的像素成为物理像素。
    
    默认物理像素和css像素1:1显示，放大缩小后就不是了
 *  百分比
    
    设置百分比是以父元素的样式来计算
    
    使用百分比能够同比例变化，父元素变化，子元素随之变化
    
    创建自适应页面时常使用
 *  em
    
    em和百分比类似，不过是相对于字体大小来计算的
    
    1em=1个font-size的值
    
    使用em时，当字体大小发生改变，则em也随之改变
    
    如果设置的样式和字体相关，就可以使用em单位

### CSS颜色单位 ###

*  颜色单词
    
    在CSS中可以直接使用颜色的单词来表示不同的颜色，如红色red，蓝色blue，绿色green。
 *  RGB表示法
    
    RGB表示法是通过Red，Green，Blue三原色，通过三原色不同的配比，来表示不同的颜色。
    
    值在0255之间，也可以使用百分比来表示，百分比最终也会转换为0255之间的值。
    
    RBG表示法可以使用最后a表示透明度，rgba（），0~1之间，0表示全透明，1表示不透明。
 *  使用十六进制表示法
    
    \#+十六进制表示法表示颜色，原理和rgb表示法相同，只不过是用十六进制数值方式来表示。
    
    十六进制：0,1,2,3,4,5,6,7,8,9,a，b，c，d，e，f表示，逢16进1。
    
    每一组表示一个颜色，00~FF，00表示没有，相当于RGB中的0，FF表示最大值，相当于RGB中的255。第一组表示红色，第二组表示绿色，第三组表示黄色。
    
    \#FFCCCC可以简写为\#FCC，\#FFFFFF可以简写为\#FFF

### CSS字体样式 ###

字体颜色、字体大小、字体系列、字体分类、字体粗细、字体风格。

*  设置字体颜色：color:red
 *  设置字体大小，不是文字本身的大小，文字都是在看不见的格子的大小，设置的font-size其实都是方格的大小，字体效果不同，可能会有所影响字体大小。如：font-size：50px，字体的默认大小为16px
 *  字体系列，font-family如果字体不支持，则使用默认字体，可以同时设置多个字体系列。浏览器使用的字体是计算机中安装的字体。
 *  字体分类：属于字体分类，font-family，网页中将字体分成了5类：serif衬线字体，sans-serif非衬线字体，monospace等宽字体（开发中常用），cursive草书字体，fantasy虚幻字体。
 *  字体风格，font-style，可选择normal正常显示效果，italic文本斜体显示，oblique文本倾斜显示，大部分浏览器对斜体和倾斜不做区分。
 *  字体粗细：font-weight，值为bolder表示更粗的字体，bold表示加粗字体，lighter表示更细的字体。也可以使用100~900之间的值表示。
 *  font-variant设置小型大写字母，可选值，normal正常值，small-caps文本以大写，较小的方式显示。
 *  font可以设置字体的多个样式，不同的值用空格隔开，如font:italic small-caps bold 20px “微软雅黑”;

### CSS文本样式 ###

*  text-transform：设置字体的大小写，只影响英文
    
    值：lowercase，全小写，
    
    none，没有任何改动
    
    capitalize：单词首字母大写
    
    uppercase：所有单词大写
 *  text-decoration：设置文本的修饰
    
    值：underline：为文本添加下划线
    
    overline：为文本添加上划线
    
    line-through：为文本添加删除线
 *  letter-spacing：设置字符之间的间距，一般用在中文中
 *  word-spacing：设置单词之间的间距，一般用在英文中
 *  text-align：文本对齐方式，可选值left左对齐，为默认值，right右对齐，center居中对齐，justify两端对齐。
 *  行高：line-height

CSS中没有直接提供行间距的样式，可以间接的通过行高来设置，行高越大，行间距越大。网页中的文本内容实际上有一行一行的线，在字体的偏下位置，线与线之间的距离成为行高。文本会默认在行高的垂直居中显示。

行间距=行高-字体大小。

*  vartical-align：垂直方向对齐效果。多使用middle。
 *  text-shadow:设置文本阴影
    
    语法：text-shadow：阴影颜色，X轴偏移，Y轴偏移（x为正右偏移，为负右偏移）（Y为正向下偏移，Y为负向上偏移），阴影的模糊半径。

### 伪类样式 ###

*  伪类样式
    
    伪类专门表示元素的一种特殊状态，比如：访问过的链接或者普通的超链接。
    
        <style>
            a:link{
               
                /*未访问的链接*/
                color:black;
            }
            a:visited{
               
                /*已访问的链接*/
                color:red;
            }
            a:hover{
               
                /*鼠标悬浮的链接*/
                color:yellow;
            }
            a:active{
               
                /*已选中的链接*/
                color:green;
            }
        </style>

四种伪类也可以应用在其他标签中

由于用户隐私问题，使用visited伪类修改时只能修改颜色

:focus表示获取焦点（常用在文本框获取焦点后改变样式）

::selection表示选中的内容改变样式

### CSS列表样式 ###

list-style-type：设置列表项标志的类型

none：无标记（去掉实心点），disc：实心圆点（默认值），circle：空心圆。

list-style-image：将图片设置为列表项的标记

`list-style-image:url();`

list-style-position:设置列表项标记的位置

inside：将列表项标记设置在文本项以内

outside：将列表项标记设置在文本项以外（默认值）

简写属性：list-style:none inside url();

### CSS背景属性 ###

*   *  background-color背景颜色，在元素的最底层，会被覆盖掉。
     *  background-image背景图片
        
        如果背景图片大于元素，则显示左上角；
        
        如果背景图片和元素大小相同，则背景图片全部显示；
        
        如果背景图片小于元素大小，则出现平铺效果。
     *  background-repeat设置背景重复效果
        
        repeat背景平铺效果，默认值；
        
        no-repeat背景不重复；
        
        repeat-x沿着X轴平铺；
        
        repeat-y沿着Y轴平铺；
     *  backgground-position设置背景的起始位置，默认在左上角。
        
         *  使用关键字
            
            （left，top，right，bottom，center）
            
            left center：水平方向靠左，垂直方向居中；
            
            right top：水平方向靠右，垂直方向靠上；
            
            如果只设置一个值，则第二个值默认为center
         *  也可以使用单位值xpos和ypos设置
            
            background-position:150px,150px;向右150px，下150px
         *  可以使用百分比表示
            
            background-position:50%,50%;根据当前元素的宽和高进行计算。
     *  background-size设置背景图片的大小
        
         *  auto默认值，图片原本的大小
         *  cover，放大，填充整个元素
         *  contain，保持图片的宽高比将图片放大填充整个元素（宽或高）
         *  100px 100px；设置宽高均为100px
         *  50% 50%；根据元素的宽高进行计算。
     *  background-attachment：设置背景图片是否随滚动条一起滚动
        
         *  fixed：将图片固定在一个位置，不随滚动条移动，定义为窗口浏览器。
         *  scroll：默认值，背景图片随滚动条滚动。
     *  background：linear-gradient（ to top ,yellow,orchid,red);
        
        颜色由下向上由黄向红渐变
        
        background：linear-gradient（ to top right ,yellow,orchid,red);
        
        颜色由左下向右上渐变

### 浏览器前缀 ###

浏览器的前缀：

\-ms：IE浏览器

\-moz：Firefox

\--webkit：safari and Chrome

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20220829/541bfccb560a4607b50fbd29b7a9925a.png