监理工程师学习看书的顺序与进度？
2021-06-13
注意:选择器是用于指定CSS样式的HTML标签，花括号内是
更新时间：2022-11-13 17:31:05作者：佚名
注意:
选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式属性和属性值以“键值对”的形式出现属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等属性和属性值之间用英文“:”分开多个“键值对”之间用英文“;”进行区分
所有的样式，都包含在 标签内，表示是样式表， 一般写到 上方。
样例:
<style>
h3 {
color: blue;
font-size: 20px;
}
</style>
测试:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
h3 {
color: blue;
font-size: 20px;
}
style>
head>
<body>
<h3>CSS测试h3>
body>
html>
二. CSS 选择器
选择器就是根据不同需求把不同的标签选出来
选择器分为两个大类
基础选择器复合选择器 2.1 css基础选择器
基础选择器是由单个选择器组成的
基础选择器又包括：
标签选择器类选择器id 选择器通配符选择器 2.1.1 标签选择器
标签选择器（元素选择器）是指用 HTML 标签名称作为 选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。
标签选择器可以把某一类标签全部选择出来，比如所有的
标签和所有的 标签。
样例:
p {
color: blanchedalmond;
font-size: 50px;
}
测试:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
div {
color: blanchedalmond;
font-size: 50px;
}
style>
head>
<body>
<div>CSS测试div>
body>
html>
2.1.2 类选择器
如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器
.red {
color: red;
}
......
变红色
类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示
类选择器可以使用多个类名，多个类名中间必须用空格分开
山东省
测试:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.red {
color: red;
font-size: 20px;
}
.blue {
color: blue;
font-size: 30px;
}
style>
head>
<body>
<div class = 'red'>CSS测试1_reddiv>
<div class = 'blue'>CSS测试2_bluediv>
body>
html>
2.1.3 id选择器
HTML 元素 以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#" 来定义
注意：
id 属性只能在每个 HTML 文档中出现一次。
测试:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
#red {
color:red;
}
style>
head>
<body>
<div id="red">CSS测试1_reddiv>
body>
html>
2.1.4 通配符选择器
通配符选择器使用“ * ”定义，它表示选取页面中所有元素（标签）
通配符选择器不需要调用，一般常用于清除所有的元素标签的内外边距
样例:
* {
margin: 0;
padding: 0;
}
测试:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
* {
margin: 0;
padding: 0;
}
style>
head>
<body>
<div>CSS测试_通配符div>
body>
html>
2.2 css复合选择器
在CSS 中，复合选择器是建立在基础选择器之上图片代码转换器，对基本选择器进行组合形成的。
复合选择器可以更准确、更高效的选择目标元素（标签）复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的常用的复合选择器包括：
3.1) 后代选择器
3.2) 子选择器
3.3) 并集选择器
3.4) 伪类选择器等等 2.2.1 后代选择器
后代选择器 又称为 包含选择器 ，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在 后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
代码:
<html>
<head>
<style type="text/css">
h1 em {color:red;}
style>
head>
<body>
<h1>This is a <em>importantem> headingh1>
<p>This is a <em>importantem> paragraph.p>
body>
html>
测试记录:
2.2.2 子选择器
子元素选择器（子选择器）只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素.
代码:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 > strong {color:red;}
</style>
</head>
<body>
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>
</html>
测试记录:
2.2.3 并集选择器
并集选择器可以选择多组标签, 同时为他们定义相同的样式,各选择器通过英文逗号","连接而成
代码:
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复合选择器之并集选择器title>
<style>
/* div,p{
color: pink;
} */
div,p,.pig {
color: pink;
}
style>
head>
<body>
并集选择器可以选择多组标签，同时针对他们的样式进行更改<br>
元素1，元素2，元素2{} 元素中间用英文逗号隔开，逗号是“和”的意思，通常用于集体声明；
<div>熊大div>
<p>熊二p>
<span>光头强span>
<ul class="pig">
<li>小猪佩奇li>
<li>猪爸爸li>
<li>猪妈妈li>
ul>
body>
html>
测试记录:
2.2.4 伪类选择器
伪类选择器用于向某些选择器添加特殊的效果
伪类选择器书写最大的特点是用冒号 ":" 表示，比如 :hover 、 :first-child
伪类选择器很多，有链接伪类、结构伪类等，这里先介绍的是 链接伪类选择器
a {
color: gray;
}
/* 1.选中未被访问过的链接 */
a:link {
color: black;
text-decoration: none;
}
/* 2.选择已访问的链接 */
a:visited {
color: red;
}
/* 3.选择鼠标经过的链接(实际开发重点) */
a:hover {
color: blue;
}
/* 4.选择鼠标按下但未弹起的链接 */
a:active {
color: forestgreen;
}
注意：
为了确保生效，请按照 LVHA 的循顺序声明 :link : :hover :
focus 伪类选择器：
:focus 伪类选择器主要用于选取获得焦点的表单元素。 焦点就是光标，一般情况 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说
测试代码:
<!DOCTYPE html">
<html>
<head>
<style type="text/css">
input:focus
{
background-color:yellow;
}
style>
head>
<body>
<form action="form_action.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
form>
body>
html>
测试记录:
2.3 CSS3 新增选择器 2.3.1 属性选择器
属性选择器可以根据元素特定属性的来选择元素，这样就可以不用借助于类或者id选择器。
/* 1.必须是input 但是同时具有 value这个属性 选择这个元素 */
input[value] {
color:pink;
}
/* 2.只把 type =text 的input选取出来 */
input[type=text] {
color: pink;
}
/* 3.选择具有class属性，并且属性值必须是 icon开头 的这些元素 */
div[class^=icon] {
color: red;
}
/* 4.选择以data结尾的某些元素 */
section[class$=data] {
color: blue;
}
/* 5.选择属性里含有 xd 的某些元素 */
div[class*=xd] {
color: red;
}
注意：
属性选择器中标签名与属性之间没有空格！
2.3.2 结构伪类选择器
结构伪类选择器主要根据 文档结构 来选择器元素， 常用于根据父级选择器里面的子元素
/* 1. 选择ul里面的第一个孩子 小li */
ul li:first-child {
background-color: pink;
}
/* 2. 选择ul里面的最后一个孩子 小li */
ul li:last-child {
background-color: pink;
}
/* 3. 选择ul里面的第2个孩子 小li */
ul li:nth-child(2) {
background-color: skyblue;
}
/* 1.把所有的偶数 even的孩子选出来 */
ul li:nth-child(even) {
background-color: #ccc;
}
/* 2.把所有的奇数 odd的孩子选出来 */
ul li:nth-child(odd) {
background-color: gray;
}
注意：
nth-child（n）选择某个父元素的一个或多个特定的子元素，n 是从 0 开始计算的，可以是数字，关键字(even odd)和公式
上面三个同理，区别在于：
nth-child 对父元素里面所有孩子排序选择， 先找到第n个孩子，然后看看是否和E匹配nth-of-type 对父元素里面指定子元素进行排序选择， 先去匹配E ，然后再根据E 找第n个孩子 2.3.3 伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构
.fake::before {
content: '我';
}
.fake::after {
content: '小猪佩奇';
}
注意：
和 after 创建一个元素图片代码转换器，但是属于行内元素新创建的这个元素在文档树中是找不到的，所以我们称为伪元素 和 after 必须有 属性 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素 三. 字体属性 3.1 字体系列
CSS 使用 font- 属性定义文本的字体系列
div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}
各种字体之间必须使用英文状态下的逗号隔开
一般情况下,如果有空格隔开的多个单词组成的字体,加引号.
3.2 字体大小
CSS 使用 font-size 属性定义字体大小
p {
font-size: 20px;
}
px（像素）大小是我们网页的最常用的单位
谷歌浏览器默认的文字大小为16px
3.3 字体粗细
CSS 使用 font- 属性设置文本字体的粗细
p {
font-weight: bold;
}
3.4 文字样式
CSS 使用 font-style 属性设置文本的风格
p {
font-style: normal;
}
3.5 字体复合属性
字体属性可以把以上文字样式综合来写, 这样可以更节约代码:
body {
font: font-style font-weight font-size/line-height font-family;
}
注意:
必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
必须保留 font-size 和 font- 属性，其他属性可以省略，否则 font 属性将不起作用
四. 文本属性 4.1 文本颜色
color 属性用于定义文本的颜色。
div {
color: red;
}
有三种颜色的表示方式，开发中最常用的是十六进制
4.2 对齐文本 4.2.1 水平对齐文本
text-align 属性用于设置元素内文本内容的水平对齐方式
div {
text-align: center;
}
4.2.2 垂直对齐文本
CSS 的 -align 属性使用场景： 经常用于设置图片或者表单和文字垂直对齐。但是它只针对于行内元素或者行内块元素有效
vertical-align : baseline | top | middle | bottom
解决图片底部默认空白缝隙问题：
bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
主要解决方法有两种：
给图片添加 -align: | top| 等。 （提倡使用的）把图片转换为块级元素 : block; 4.3 装饰文本
text- 属性规定添加到文本的修饰，可以给文本添加下划线、删除线、上划线等
div {
text-decoration：underline；
}
4.4 文本缩进
text- 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进
p {
text-indent: 2em;
}
注意：
em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。
4.5 行间距
line- 属性用于设置行间的距离（行高），可以控制文字行与行之间的距离.
p {
line-height: 26px;
}
注意：
line-让文字的行高等于盒子的高度,可以实现文字在盒子内垂直居中
4.6 文字阴影
在 CSS3 中，我们可以使用 text- 属性将阴影应用于文本
text-shadow: h-shadow v-shadow blur color;
4.7 溢出的文字省略号显示 4.7.1 单行文本溢出显示省略号
单行文本溢出显示省略号–必须满足三个条件:
/*1. 先强制一行内显示文本*/
white-space: nowrap; （ 默认 normal 自动换行）
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
4.7.2 多行文本溢出显示省略号
多行文本溢出显示省略号，有较大兼容性问题, 适合于浏览器或移动端（移动端大部分是内核）
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
4.8 CSS的注释
CSS 中的注释跟在HTML5中的不同，它以“ /* ”开头，以“ */ ”结尾
/* 需要注释的内容 */
五. CSS引入方式
按照 CSS 样式书写的位置（或者引入的方式），CSS 样式表可以分为三大类：
内部样式表（嵌入式）行内样式表（行内式）外部样式表（链接式） 5.1 内部样式表
内部样式表是写到html页面内部.，将所有的 CSS 代码抽取出来，单独放到一个
<style>
div {
color: red;
font-size: 12px;
}
style>
5.2 行内样式表
行内样式表是在元素标签内部的 style 属性中设定 CSS 样式，适合于修改简单样式.
青春不常在，抓紧谈恋爱
不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用
5.3 外部样式表
实际开发都是外部样式表，适合于样式比较多的情况.
引入外部样式表分为两步：
新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。在 HTML 页面中，使用 标签引入这个文件
<link rel="stylesheet" href="css文件路径">
六. 元素显示模式
元素显示模式就是 元素（标签）以什么方式进行显示
HTML 元素一般分为：
块元素行内元素行内块元素 6.1 块元素
常见的块元素有~、
、
、
专栏目录
上一篇： 夫妻笑话故事
相关文章
为您推荐
加载中...