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(选择器)
样式的继承：子元素的样式可以继承父元素的样式

祖先元素的样式，后代元素有可能会继承

不是所有的样式都拥有继承性

选择器的优先级

不同的样式使用到同一个元素中，根据选择器的优先级，优先级高的起作用。

在这里插入图片描述

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

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

权重相同按顺序执行

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

继承没有优先级，通配符优先级为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三原色，通过三原色不同的配比，来表示不同的颜色。

值在0_{255之间，也可以使用百分比来表示，百分比最终也会转换为0}255之间的值。

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);
  
  颜色由左下向右上渐变