Css样式 2021-06-10

第4章 css样式

内部样式

外部样式

href：引入的地址

rel：引入外部样式

type：类型

链接式与导入式的区别

标签属于XHTML，@import是属于CSS2.1 使用链接的CSS文件先加载到网页当中，再进行编译显示 使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中 @import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的

CSS样式优先级

行内样式>内部样式表>外部样式表
就近原则

CSS基本选择器

标签选择器

语法：

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

类选择器

语法

.p _1{
    font-style: oblique;
}

ID选择器

语法

#title{
    color: red;
}

选择器优先级

ID选择器>类选择器>标签选择器

高级选择器

后代选择器

<!--
后代选择器
选择匹配的F元素，
且匹配的F元素被包含在匹配的E元素内
-->

div p {
    color: green;
}

注意点

后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入

子选择器

div>p{
    background-color: red;
}

相邻兄弟选择器

.active+p{
    background-color: #0099FF;
}

通用兄弟选择器

.active~p{
    background-color: #9e9dff;
}

选择器	类 型	功能描述
E F	后代选择器	选择匹配的 F 元素，且匹配的 F 元素被包含在匹配的 E 元素内
E>F	子选择器	选择匹配的 F 元素，且匹配的 F 元素是匹配的 E 元素的子元素
E+F	相邻兄弟选择器	选择匹配的 F 元素，且匹配的 F 元素紧位于匹配的 E 元素后面
E~F	通用兄弟选择器	选择匹配的 F 元素，且位于匹配的 E 元素后的所有匹配的 F 元素

结构伪类选择器

选择器	功能描述
E:first-child	作为父元素的第一个子元素的元素****E
E:last-child	作为父元素的最后一个子元素的元素****E
E F:nth-child(n)	选择父级元素****E 的第 n 个子元素 F ，（ n 可以是 1 、 2 、 3 ），关键字为 even 、 odd
E:first-of-type	选择父元素内具有指定类型的第一个****E 元素
E:last-of-type	选择父元素内具有指定类型的最后一个****E 元素
E F:nth-of-type(n**)**	选择父元素内具有指定类型的第****n 个 F 元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pFOxFxYh-1623291678549)(image-20210603161304437.png)]

p:first-child{
    background-color: #9e9dff;
}

使用E F:nth-child(n)和E F:nth-of-type(n)的 关键点
E F:nth-child(n)在父级里从一个元素开始查找，不分类型
E F:nth-of-type(n)在父级里先看类型，再看位置

div ul li {
     display: inline-block;  //行内块级
 }

属性选择器

属性 选择器	功能描述
E[ attr ]	选择匹配具有属性 attr 的 E 元素
E[ attr = val ]	选择匹配具有属性 attr 的 E 元素 , 并且属性值为 val （其中 val 区分大小写）
E[attr^=val]	选择匹配元素 E ，且 E 元素定义了属性 attr ，其属性值是以 val 开头的任意字符串
E[attr$=val]	选择匹配元素 E ，且 E 元素定义了属性 attr ，其属性值是以 val 结尾的任意字符串
E[ attr *= val ]	选择匹配元素 E ，且 E 元素定义了属性 attr ，其属性值包含了“ val ”，换句话说，字符串 val 与属性值中的任意位置相匹配

/*选取a标签的id属性*/
a[id]{
    background: yellow;
}
/*选取a标签的id属性值是first的*/
a[id=first]{
    background-color: #a40cff;
}
/*选取a标签的id属性值包含a的*/
a[id *=a]{
    background-color: green;
}
/*选取a标签的id属性值以s开头的*/
a[id^=s]{
    background-color: aquamarine;
}
/*选取a标签的id属性值以pp结尾的*/
a[id$=pp]{
    background-color: aquamarine;
}

/*a标签美化*/
.demo a {
    float: left;
    display: block;
    height: 50px;
    width: 50px;
    border-radius: 10px;
    text-align: center;
    background: #aac;
    color: blue;
    font: bold 20px/50px Arial;
    /*margin-right: 5px;*/
    text-decoration: none;
    margin: 5px;
}