什么是CSS3？

最新推荐文章于 2021-12-22 10:52:06 发布

一杯崽！

最新推荐文章于 2021-12-22 10:52:06 发布

阅读量282

点赞数 1

文章标签： css3 css 前端

本文链接：https://blog.csdn.net/m0_55068275/article/details/121785393

版权

一、什么是CSS？

1.1、CSS的概念：Cascading Style Sheet 级联样式表；

1.2:、表现HTML或XHTHL文件样式的计算机语言

包括对字体、颜色、边距、高度、宽度、背景图片、网页定位对那个设定

二CSS的发展史

三、CSS的优势

内容与表现分离
网页的表现统一，容易修改
丰富的样式，是的页面布局更加灵活
减少网页的代码量，增加网页的浏览熟读，节省网络宽带
运用独立于页面的CSS，有利于网页被搜索引擎收录

四、CSS的基本语法

4.1

选择器{

声明1；

声明2；

......}

经验：CSS的最后一条声明后的“;”可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束“;”都要写上；

4.2、Style标签

<style type="text/css">
h1 {
	font-size:12px;
	color:#F00;
}
</style>

五、HTML中引入CSS样式

5.1

行内样式

行内样式使用style属性引入CSS样式

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

内部样式

内部样式表CSS代码写在<head>的<style>标签中

示例：<style>

h1{color: green; }

</style>

优点：方便在同页面中修改样式

缺点：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底

外部样式

外部样式表链接外部样式表方式一

示例：<head> ……

<link href="style.css" rel="stylesheet" type="text/css" />

……

</head>

外部样式表导入外部样式表方式二

示例:<head> ……

<style type="text/css">



</style>

</head>

5.2链接式与导入式的区别

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

5.3CSS样式优先级

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

六、CSS基本选择器

标签选择器

HTML标签作为标签选择器的名称

语法：

p{font-size：16px；}

类选择器

语法：.class{font-size:16px;}

ID选择器

语法：#id{font-size:16px;}

小结

标签选择器直接应用于HTML标签
类选择器可在页面中多次使用
ID选择器在同一个页面中只能使用一次

七、CSS的高级选择器

层次选择器

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

1.后代选择器语法： body p{background:red;}

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

2.子选择器语法：body>p{ background: pink; }

3.相邻兄弟选择器： .active+p { background: green; }

4.通用兄弟选择器： .active~p{ background: yellow; }

结构伪类选择器

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

使用E F:nth-child(n)和E F:nth-of-type(n)的关键点

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

属性选择器

属性选择器	功能描述
E[attr]	选择匹配具有属性attr的E元素
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与属性值中的任意位置相匹配

1、E[attr]属性选择器语法： a[id] { background: yellow; }

2、E[attr=val]属性选择器语法： a[id=first] { background: red; }

注意：E[attr=val]属性选择器中，属性和属性值必须完全匹配才能被选中

2、E[attr^=val]属性选择器语法： a[href^=http] { background: red; }

3、E[attr*=val]属性选择器语法： a[class*=links] { background: red; }

4、E[attr^=val]属性选择器语法： a[href^=http] { background: red; }

5、E[attr$=val]属性选择器语法：E[attr$=val]属性选择器

一杯崽！

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
什么是CSS3？

一、什么是CSS？1.1、CSS的概念：Cascading Style Sheet 级联样式表；1.2:、表现HTML或XHTHL文件样式的计算机语言包括对字体、颜色、边距、高度、宽度、背景图片、网页定位对那个设定二CSS的发展史三、CSS的优势内容与表现分离网页的表现统一，容易修改丰富的样式，是的页面布局更加灵活减少网页的代码量，增加网页的浏览熟读，节省网络宽带运用独立于页面的CSS，有利于网页被搜索引擎收录四、CSS的基本语法4.1...
复制链接

扫一扫