CSS3

最新推荐文章于 2021-11-09 09:06:23 发布

李大锋�

最新推荐文章于 2021-11-09 09:06:23 发布

阅读量236

点赞数

文章标签： HTML5 CSS3选择器 CSS3

本文链接：https://blog.csdn.net/weixin_43779926/article/details/84711774

版权

一、CSS简介

1.Cascading Style Sheet 级联样式表

2.表现HTML或XHTML文件样式的计算机语言

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

二、CSS优势

1.内容与表现分离

2.网页的表现统一，容易修改

3.丰富的样式，使得页面布局更加灵活

4.减少网页的代码量，增加网页的浏览速度，节省网络带宽

5.运用独立于页面的CSS，有利于网页被搜索引擎收录

三、CSS的基本语法

1.

选择器 { 声明1;
              声明2;
              ……  }



h1 {
	font-size:12px;
	color:#F00;
}

注：h1是选择器；font-size是属性；12px是值；｛font-size:12px; 和color:#F00;}都是声明；

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

2.style标签

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

四、HTML中引入CSS样式

1.行内样式

使用style属性引入CSS样式1

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

2.内部样式

CSS代码写在<head>的<style>标签中

<style>
        h1{color: green; }
</style>

a.优点:方便在同页面中修改样式

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

3.外部样式

a.CSS代码保存在扩展名为.css的样式表中

b.HTML文件引用扩展名为.css的样式表，有两种方式

b.1链接式

链接外部样式表

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

b2.导入式

导入外部样式表

<head>
……
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>

链接式与导入式的区别：

1.<link/>标签属于XHTML，@import是属于CSS2.1

2.使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示

3.使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中

4.@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的

4.CSS样式优先级

a.行内样式>内部样式表>外部样式表

b.就近原则

五、CSS3基本选择器

1.标签选择器

2.类选择器：标签作为标签选择器的名称

3.ID选择器：<h1>…<h6>、<p>、<img/>

4.注：

a.标签选择器直接应用于HTML标签

b.类选择器可在页面中多次使用

c.ID选择器在同一个页面中只能使用一次

d.基本选择器的优先级:ID选择器>类选择器>标签选择器

六、CSS的高级选择器

1.层次选择器

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

a.后代选择器

 body p{  background: red;  }

b.子选择器

 body>p{  background: pink;  }

c.相邻兄弟选择器

.active+p {  background: green;  }

d.通用兄弟选择器

.active~p{  background: yellow;  }

2.结构伪类选择器

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>使用CSS3结构伪类选择器</title>
</head>
<body>
     <p>p1</p><p>p2</p><p>p3</p>
    <ul>
        <li>li1</li><li>li2</li><li>li3</li>
    </ul>
</body>
</html>

选择器	功能描述
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元素

ul li:first-child{ background: red;}

ul li:last-child{ background: green;}

p:nth-child(1){ background: yellow;}

p:nth-of-type(2){ background: blue;}

注：

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

2.E F:nth-child(n)在父级里从一个元素开始查找，不分类型

3.E F:nth-of-type(n)在父级里先看类型，再看位置

3.属性选择器

属性选择器	功能描述
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.E[attr]属性选择器

 a[id] { background: yellow; }

b.E[attr=val]属性选择器

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

 a[id=first] { background: red; }

d.E[attr*=val]属性选择器

 a[class*=links] { background: red; }

e.E[attr^=val]属性选择器

 a[href^=http] { background: red; }

f.E[attr$=val]属性选择器

 a[href$=png] { background: red; }

七、总结

李大锋�

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3

一、CSS简介1.Cascading Style Sheet 级联样式表2.表现HTML或XHTML文件样式的计算机语言 -&gt;包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定二、CSS优势1.内容与表现分离2.网页的表现统一，容易修改3.丰富的样式，使得页面布局更加灵活4.减少网页的代码量，增加网页的浏览速度，节省网络带宽5.运用独立于...
复制链接

扫一扫