前端学习第三天——人靠衣服马靠鞍，网页还得css来美观

诸葛冰箱

已于 2023-01-17 21:37:45 修改

阅读量100

点赞数

分类专栏：前端文章标签： css

于 2021-01-06 10:22:33 首次发布

本文链接：https://blog.csdn.net/qq_43493084/article/details/112259175

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

前端学习第三天——人靠衣服马靠鞍，网页还得css来美观

CSS3

CSS（cascading style sheet,层叠式样式表）用来给HTML标签添加样式

前端三层

	语言	功能
结构层	HTML	搭建结构、放置部件、描述语义
样式层	CSS	美化页面、实现布局
行为层	JavaScript	实现交互效果、数据收发、表单验证

CSS的书写位置

内嵌式
在<head></head>标签对中，书写<style></style>标签对，里面书写CSS语句
外链式
将CSS单独存为.css文件，然后使用<link>标签引入

<link rel="stylesheet" href="css.css"><!--  rel:关系 stylesheet 样式表  -->

导入式(不推荐使用)，不会等待css文件加载完毕，而是立即渲染HTML结构。

<style>
    @import url(css/css.css)
</style>

行内式（不常用），样式直接通过style属性写在标签上。牺牲了样式表的批量设置样式的能力

<h2 style="color: red">我是行内式</h2>

CSS3的基本语法

选择器{
    /* 注释 */
      k : v ;
}

传统CSSS2.1选择器

标签选择器和id选择器
标签选择器也称元素选择器、类型选择器，他直接使用元素的标签名当做选择器，会选择页面上的所有这种标签

span{
    color:red;
}

标签选择器“f覆盖面”非常大，所以通常用于标签的初始化

ul{
    /* 去掉无序列表的小圆点 */
    list-style:none;
}
a{
    /* 去掉超级链接的下划线 */
    text-decoration: none;
}

id属性是这个标签的唯一标识。id名称只能有 字母、数字、下划线、短横 构成，不能以数字开头，字母区分大小写

#+id{
    k : v;
}

class选择器
class属性表示“类名”，class名称只能有 字母、数字、下划线、短横 构成，不能以数字开头，字母区分大小写

.+class{
    k:v;
}

同一个标签可以同时属于多个类，类名用空格隔开

.warning{
        color: brown;
        }
.spec{
    /* 文字倾斜 */
    font-style: italic;
    }
<p class="warning spec">我有两个class选择器</p>

当两个类选择器的样式出现冲突，与类选择器在CSS的清单中书写前后顺序有关，后一个会覆盖前一个样式
原子类：在做网页钱，可以将常用的字号、文字颜色、行高、外边距、内边距等设置为单独的类

复合选择器

CSS中用空格表示后代，可以有很多的空格隔开好几代

选择器名称	示例	示例额的意义
后代选择器	.box .spec	选择类名为box的标签内部类名为spec的标签
交集选择器	li.spec	选择既是li标签，也属于spec类的标签
并集选择器	ul,ol	选择所有ul和ol标签

伪类
添加到选择器的描述性词语，指定要选择的元素的特殊状态

伪类	意义
a:link	没有被访问的超链接
a:visited	已经被访问过的超链接
a:hover	鼠标悬停的超链接
a:active	正在被激活的超链接（鼠标点击但没有松开）

CSS3新增选择器

元素关系选择器
子选择器只会选择第一个元素的直接后代，也就是两个标签试父子关系
相邻兄弟选择器只会选择第二个元素紧跟在第一个元素之后，并且两个元素属于同一个父元素。第二个元素将被选中
通用兄弟选择器选择第一个元素后面的所有同层级的第二个元素

名称	举例	意义
子选择器	div>p	div的子标签p
相邻兄弟选择器	img+p	图片后面紧跟着的段落将被选中
通用兄弟选择器	p~span	p元素之后的所有通层级的span

序号选择器

举例	意义
:first-child	第一个子元素
:last-child	最后一个子元素
:nth-child(3)	第3个子元素
:nth-of-type(3)	第3个某类型子元素
:nth-last-child	倒数第3个元素
:nth-last-of-type(3)	倒数第3个某类型子元素
`:nth-child()`可以写成an+b的形式，表示从b开始每a个选一个，不能写成b+an
2n+1等价于`odd`，表示奇数
2n等价于`even`，表示偶数
`:nth-of-type()`选择同种标签指定的序号的子元素

/* 规定属于其父元素的第二个子元素的每个 p 的背景色： */
p:nth-child(2)
{
background:#ff0000;
}

属性选择器
在实际工作中使用并不是很多

举例	意义
img[alt]	选择有alt属性的`img`标签
img[alt=“故宫”]	选择alt属性是故宫的`img`标签
img[alt^=“北京”]	选择alt属性以北京开头的`img`标签
img[alt$=“夜景”]	选择alt属性以夜景结尾的`img`标签
img[alt*=“美”]	选择alt属性中含有美字的`img`标签
img[alt~=“手机拍摄”]	选择alt属性中有空格隔开的手机拍摄字样的`img`标签
img[alt\|=“参赛作品”]	选择alt属性以参赛作品-开头的`img`标签

CSS3新增伪类

举例	意义
:empty	选择空标签
:focus	选择当前获得焦点的表单元素
:enabled	选择当前有效的表单元素
:disabled	选择当前无效的表单元素
:checked	选择当前已经勾选的单选按钮或者复选框
:root	选择根元素，即`<html>`标签

伪元素
::before创建一个伪元素，将其称为匹配选中的元素的第一个子元素，必须设置content属性表示其中的内容

a::before{
    content:"在a标签内部原来的所有原来的文字前面加上content里面的内容";
}

::after创建一个伪元素，将其称为匹配选中的元素的最后一个子元素，必须设置content属性表示其中的内容

a::after{
    content:"在a标签内部原来的所有原来的文字后面加上content里面的内容";
}

::selection应用于文档中备用不选中的部分

.box1::selection{
            color: aqua;
            background-color: black;
        }

::first-letter会选中块级元素第一行的第一个字母
::first-line会选中块级元素第一行的全部文

层叠行

层叠性：多个选择器可以同时作用于同一个标签，效果叠加
层叠性的冲突处理：id权重>class权重>标签权重
复杂选择器可以通过id的个数，class的个数，标签的个数的形式，计算权重

    <style>
        #box1 #box2 p{
            /* 权重（2,0,1） */
            color: red;
        }
        #box1 div.box2 #box3 p{
            /* 权重（2，0,2） */
            color: green;
        }
        .box1 .box2 .box3 p{
            /* 权重（0,3,1） */
            color: bule;
        }
    </style>
    <div id="box1" class="box1">
        <div id="box2" class="box2">
            <div id="box3" class="box3">
                <p>我是段落</p>
            </div>
        </div>
    </div>

可以在属性的湖面写!important将某个选择器的某条属性提升权重，但这样可能会带来样式冲突

.spec{
    color:blue !important;
}

常用的文本样式属性

color属性可以设置文本内容的前景色，可以用英语单词（工作上基本上不用）、十六进制、rgb()、rgba()
font-size属性用来设置字号，单位通常为px，还有em,rem
font-weight属性用来设置字体的粗细程度，通常使用normal和bold两个值
font-style属性用来设置字体的倾斜，常用的值有normal和italtic
text-decoration属性用来设置文本的修饰线（下划线、删除线）none、underline（下划线）、line-through（删除线）

字体属性

font-family属性设置字体

font-family:"微软雅黑";

字体可以是列表形式，一般英语字体放在前面，后面的字体是前面的字体的“后备”字体

font-family:serif, "Time New Roman", "微软雅黑";

段落和行相关属性

text-indent属性定义首行文本内容之前的缩进量，

text-indent: 2em;/* 缩进两个字符 */

line-height属性用于定义行高，推荐写法是没有单位的数值，表示字号的倍数

line-height:1.5;/* 表示行高是字号的1.5倍 */

单行文本垂直居中：设置行高=盒子高。
设置text-align:center可实现水平居中。

font属性可以用作font-style,font-weight,font-size,line-height和font-family属性的合写

/* 斜体 加粗 字号20px 行高1.5 字体Ariral, "微软雅黑"  */
font: italic bold 20px/1.5 Ariral, "微软雅黑";

继承性

文本相关的属性普遍具有继承性，只要给祖先标签设置，后代所有标签中也会生效。所以同城设置body标签的字号、颜色、行高等，这样就可以当做整个网页的默认样式了。
在继承的情况下，选择器权重计算实效，而是就近原则。

    <style>
        /* 就近原则 */
        /* 一样近的情况下，看权重 */
        #box1 #box2 {
            /* 远 继承的权重可以看做零*/
            color: red;
        }
        .box1 .box3{
            /* 近 */
            color: blue;
        }
    </style>
    <div id="box1" class="box1">
        <div id="box2" class="box2">
            <div id="box3" class="box3">
                <!-- 字体为蓝色 -->
                <p>我是段落</p>
            </div>
        </div>
    </div>