第四章

最新推荐文章于 2023-03-18 22:20:11 发布

Gudamu

最新推荐文章于 2023-03-18 22:20:11 发布

阅读量69

点赞数

分类专栏：学习笔记文章标签： html css

本文链接：https://blog.csdn.net/Gudamu/article/details/112749330

版权

学习笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

第四章

CSS3

1.CSS

1.基本语法结构
选择器 {声明1;
        声明2;
         ……
       }
       
       
2.style标签
<style type="text/css">
h1 {
	font-size:12px;
	color:#F00;
}
</style>

2.CSS样式

1.行内样式
例：
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>


2.内部样式表
例：
<style>
  h1{color: green;}
</style>
注：写在<head>的<style>标签中


3.链接外部样式表（link）（常用）
例：
<head>
  ……
<link href="style.css" rel="stylesheet" type="text/css"/>
  ……
</head>
注：“href”为文件地址；
    “rel”为使用外部样式表；
    “type”为文件类型


4.导入外部样式表(@import)（一般不用）
<head>
<style type="text/css">
@import url("style.css");
</style>
</head>

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

CSS优先级：行内样式>内部样式表>外部样式表（就近原则）

3.CSS基本选择器

1.标签选择器（由已有的块标签识别）
例：p {font-size:16px;}
注：标签选择器有<h1>-<h6>，<p>，<img/>


2.类选择器（用.识别class属性，两条语句对应使用）
<style>
标签名.类名称{...}
</style>
例：p.important {color:red;}
注：规定所有“类名称”相同的元素以某种格式表现


<标签名 class="类名称">标签内容</标签名>
例：<p class="important">重要内容</p>
注:将“某种标签”的“class”属性被指定为“类名称”


3.ID选择器（用#识别id属性，两条语句对应使用）
#语句识别名 {......}
例：#red {color:red;}
注：语句识别名可随意设定，只能用英文字母，不能用数字


<标签名 id="语句识别名">标签内容</标签名>
例：<p id="red">红色</p>
注：令标签使用对应语句识别名所对应的格式（类似超链接的对应关系）；
    一个语句中只能有一个“id”属性

选择器优先级：ID选择器>类选择器>标签选择器（不遵循就近原则）

4.CSS高级选择器

层次选择器(注意标签之间的嵌套大小、前后顺序关系)

1.后代选择器（A比B高级，B嵌套在A中）（改变所有B的样式）
标签名A  标签名B  {样式}
功能：对“标签A”中所有的“标签名B”所对应元素适用“样式”
例：h1 em {color:red;}


2.子选择器（A比B高级，B嵌套在A中）（改变所有B的样式）
标签名A > 标签名B  {样式}
功能：对“标签A”中的直系的“标签名B”所对应元素适用“样式”
例：h1 > em {color:red;}


3.相邻兄弟选择器（A和B同级）（改变A后面第一个B的样式）
标签名A + 标签名B  {样式}
功能：对“同一父标签”下“标签A”后的“第一个”“标签名B”所对应元素适用“样式”
例：h1 + p {margin-top:50px;}
注：“标签A”和“标签B”的前后顺序不可颠倒，颠倒后失效


4.通用兄弟选择器（A和B同级）（改变A后面的所有B的样式）
标签名A ~ 标签名B  {样式}
功能：对“同一父标签”下“标签A”后的“所有的”“标签名B”所对应元素适用“样式”
例：h1 ~ p {margin-top:50px;}
注：“标签A”和“标签B”的前后顺序不可颠倒，在“标签A”前的“标签B”不会适用“样式”


结构伪类选择器
1.E:first-child              作为父元素的第一个子元素的“E元素”
2.E:last-child               作为父元素的最后一个子元素的“E元素”
3.E F:nth-child(n)           选择父元素“E元素”内第n个子元素“F元素”，（n可以是1、2、3），关键字为                                  even、odd
4.E:first-of-type            选择父元素内具有指定类型的第一个“E元素”
5.E:last-of-type             选择父元素内具有指定类型的最后一个“E元素”
6.E F:nth-of-type(n)         选择父元素“E元素”内具有指定类型的第n个“F元素”
                             （括号内的“n”用于指定第几个“元素F”）

注：“E F:nth-child(n)”和“E F:nth-of-type(n)”的不同
   “E F:nth-child(n)”在父级里从一个元素开始查找，不分类型；（先位置n，后类型F）
   “E F:nth-of-type(n)”在父级里先看类型，再看位置；（先类型F，后位置n）
   即，两者仅在查找方式上不同，对实现某一功能无影响
   
   
属性选择器
1.包含某属性（匹配属性）
E[attr]
选择匹配E元素，且E元素定义了attr属性
例：a[class]{ background: red; }
选择匹配a元素，且a元素定义了“class”属性
  
  
2.包含某属性，其属性值为...（匹配属性值的全部内容）
E[attr=val]
选择匹配E元素，且a元素定义了attr属性，其属性值是为val的字符串
例：a[class18=links] { background: red; }
选择匹配a元素，且a元素定义了“class”属性，其属性值是为“links”的字符串


3.包含某属性，其属性值以...开头（匹配属性值的开头内容）
E[attr^=val]
选择匹配E元素，且E元素定义了attr属性，其属性值是以val开头的字符串
例：a[class^=links] { background: red; }
选择匹配a元素，且a元素定义了“class”属性，其属性值是以“links”开头的字符串


4.包含某属性，其属性值中包含...（匹配属性值的包含内容）
E[attr*=val]
选择匹配E元素，且E元素定义了attr属性，其属性值包含了“val”，即包含“val”的字符串
例：a[class*=links] { background: red; }
选择匹配a元素，且a元素定义了“class”属性，其属性值包含了“links”，即包含“links”的字符串


5.包含某属性，其属性值以...结尾（匹配属性值的结尾内容）
E[attr$=val]
选择匹配E元素，且E元素定义了attr属性，其属性值是以val结尾的字符串
例：a[class$=links] { background: red; }
选择匹配a元素，且a元素定义了“class”属性，其属性值是以“links”结尾的字符串

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZLqMmuIx-1610870295732)(D:\笔记\CSS属性选择器.PNG)]

Gudamu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第四章

第四章CSS31.CSS1.基本语法结构选择器 {声明1; 声明2; …… } 2.style标签<style type="text/css">h1 { font-size:12px; color:#F00;}</style>2.CSS样式1.行内样式例：<h1 style="color:red;">style属性的应用</h1><p styl
复制链接

扫一扫