文章目录

一、CSS语法
- 1.1 注释
- 1.2 CSS 引入方式
二、CSS 选择器-查找标签
- 2.1 基本选择器
- - 标签选择器
  - ID选择器
  - 类选择器
  - 通用选择器
- 2.2 组合选择器
- - 后代选择器
  - 儿子选择器
  - 毗邻选择器
  - 弟弟选择器
- 2.3 属性选择器
- 2.4 分组和嵌套
- - 分组
  - 嵌套
- 2.5 伪类选择器
- 2.6 伪元素选择器
- - first-letter
  - before
  - after
- 选择器优先级
三、CSS属性相关
- 3.1 宽和高
- 3.2 字体属性
- - 文字字体
  - 字体大小
  - 字重（粗细）
  - 文本颜色
- 3.3 文字属性
- - 文字对齐
  - 文字装饰
  - 首行缩进
- 3.4 背景属性
- 3.5 标签的边框
- - `border-radius`--圆角边框
- 3.6 `display`属性
- - **`display:"none"`与`visibility:hidden`的区别：**
- 3.7 `overflow`属性--溢出
- - 圆形头像实例
- 3.8 `position`属性--定位
- 3.9 `opacity`属性--透明度
四、`z-index`模态框

CSS（ Cascading Style Sheet，层叠样式表)定义 如何显示HTML元素。

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）

一、CSS语法

每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束

1.1 注释

/*单行注释*//*
多行注释
多行注释
多行注释
*/

1.2 CSS 引入方式

内部样式

嵌入式是将CSS样式集中写在网页的<head></head>标签内的<style></style>标签对中。格式如下：

<head><meta charset="UTF-8"><title>Title</title><style>p{background-color: #2b99ff;}</style>
</head>

外部样式

外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。

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

行内样式

行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。

<p style="color: red">Hello world.
</p>

二、CSS 选择器-查找标签

2.1 基本选择器

注意：

样式类名不要用数字开头（有的浏览器不认）

标签中的class属性如果有多个，要用空格分隔

标签选择器

标签名 { 样式 }

p {color: "red";}

ID选择器

# id 值 { 样式 }

#i1 {background-color: red;
}

类选择器

. class 值 { 样式 }

.c1 {font-size: 14px;
}
p.c1 {color: red;
}

通用选择器

全部的标签选中

* {color: white;
}

2.2 组合选择器

后代选择器

/*li内部的a标签设置字体颜色*/
li a {color: green;
}

儿子选择器

/*选择所有父级是 <div> 元素的 <p> 元素*/
div>p {font-family: "Arial Black", arial-black, cursive;
}

毗邻选择器

同级别，紧挨着的，下面的第一个标签

/*选择所有紧接着<div>元素之后的<p>元素*/
div+p {margin: 5px;
}

弟弟选择器

同级别，并且在下面的标签

/*i1后面所有的兄弟p标签*/
#i1~p {border: 2px solid royalblue;
}

2.3 属性选择器

/*用于选取带有指定属性的元素。*/
p[title] {color: red;
}/*用于选取带有指定属性和值的元素。*/
p[title="213"] {color: green;
}

2.4 分组和嵌套

分组

当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。

例如：

div, p {color: red;
}

上面的代码为div标签和p标签统一设置字体为红色。

通常，我们会分两行来写，更清晰:

div,
p {color: red;
}

嵌套

多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色。

.c1 p {color: red;
}

2.5 伪类选择器

以链接标签<a>标签为例

/* 未访问的链接 */
a:link {color: #FF0000
}/* 鼠标移动到链接上 */
a:hover {color: #FF00FF
} /* 选定的链接 */
a:active {color: #0000FF
}/* 已访问的链接 */
a:visited {color: #00FF00
} /*input输入框获取焦点时样式*/
input:focus {outline: none;background-color: #eee;
}

2.6 伪元素选择器

first-letter

常用的给首字母设置特殊样式：

p:first-letter {font-size: 48px;color: red;
}

before

/*在每个<p>元素之前插入内容*/
p:before {content:"*";color:red;
}

after

/*在每个<p>元素之后插入内容*/
p:after {content:"[?]";color:blue;
}

before和after多用于清除浮动的影响—父标签塌陷问题

选择器优先级

简而言之：对同一标签，采用相同的选择器时，离得越近影响越大，内联（行内）样式影响最大；不同的选择器，则：id 选择器 > 类选择器 > 元素选择器

三、CSS属性相关

3.1 宽和高

width属性可以为元素设置宽度。

height属性可以为元素设置高度。

块级标签才能设置宽度，行内标签的宽度由内容来决定。

3.2 字体属性

文字字体

font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。

简单实例：

body {font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}

字重（粗细）

font-weight用来设置字体的字重（粗细）

值	描述
normal	默认值，标准粗细
bold	粗体
bolder	更粗
lighter	更细
100~900	设置具体粗细，400等同于normal，而700等同于bold
inherit	继承父元素字体的粗细值

文本颜色

颜色属性被用来设置文字的颜色

颜色是通过CSS最经常的指定：

十六进制值 - 如: **＃**FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red

还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。

3.3 文字属性

文字对齐

text-align 属性规定元素中的文本的水平对齐方式。

值	描述
left	左边对齐默认值
right	右对齐
center	居中对齐
justify	两端对齐

文字装饰

text-decoration 属性用来给文字添加特殊效果。

值	描述
none	默认。定义标准的文本。
underline	下划线
overline	文本上的一条线
line-through	穿过文本下的一条线。
inherit	继承父元素的text-decoration属性的值。

常用的为去掉a标签默认的自划线：

a {text-decoration: none;
}

首行缩进

将段落的第一行缩进 32像素：

p {text-indent: 32px;
}

3.4 背景属性

/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*背景重复repeat(默认):背景图片平铺排满整个网页repeat-x：背景图片只在水平方向上平铺repeat-y：背景图片只在垂直方向上平铺no-repeat：背景图片不平铺
*/
background-repeat: no-repeat;
/*背景位置*/
background-position: left top;
/*background-position: 200px 200px;*/

支持简写：

background:#336699 url('1.png') no-repeat left top;

使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。

参考链接点我

一个有趣的例子：

中间的图片不动

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>滚动背景图示例</title><style>* {margin: 0;}.box {width: 100%;height: 500px;background: url("http://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=e9952f4a6f09c93d07a706f3aa0dd4ea/4a36acaf2edda3cc5c5bdd6409e93901213f9232.jpg")  center center;background-attachment: fixed;}.d1 {height: 500px;background-color: tomato;}.d2 {height: 500px;background-color: steelblue;}.d3 {height: 500px;background-color: mediumorchid;}</style>
</head>
<body><div class="d1"></div><div class="box"></div><div class="d2"></div><div class="d3"></div>
</body>
</html>

3.5 标签的边框

边框属性

border-width
border-style
border-color

#i1 {border-width: 2px;border-style: solid;border-color: red;
}

通常使用简写方式：

#i1 {border: 2px solid red;
}

边框样式

值	描述
none	无边框。
dotted	点状虚线边框。
dashed	矩形虚线边框。
solid	实线边框。

除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示：

#i1 {border-top-style:dotted;border-top-color: red;border-right-style:solid;border-bottom-style:dotted;border-left-style:none;
}

`border-radius`–圆角边框

用这个属性能实现圆角边框的效果。

将border-radius设置为长或高的一半即可得到一个圆形

3.6 `display`属性

用于控制HTML元素的显示效果

值	意义
display:“none”	HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:“block”	默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:“inline”	按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:“inline-block”	使元素同时具有行内元素和块级元素的特点。

`display:"none"`与`visibility:hidden`的区别：

visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

3.7 `overflow`属性–溢出

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

overflow（水平和垂直均设置）
overflow-x（设置水平方向）
overflow-y（设置垂直方向）

示例

<style>body{margin: 0;border: 3px solid black;}.d1 {height: 80px;width: 80px;background-color: tomato;}
</style>
</head>
<body><div class="d1">666666   666666   666666   666666   666666   666666   666666   666666   666666                                             666666   666666   666666   666666   666666   </div>
</body>

圆形头像实例

<!DOCTYPE HTML>
<html>
<head><meta charset="UTF-8"><title>圆形的头像示例</title><style>* {margin: 0;padding: 0;background-color: #eeeeee;}.header-img {width: 150px;height: 150px;border: 3px solid white;border-radius: 50%;overflow: hidden;}.header-img>img {width: 100%;}</style>
</head>
<body><div class="header-img"><img src="https://pic.cnblogs.com/avatar/1342004/20180304191536.png" alt="">
</div></body>
</html>圆形头像示例

3.8 `position`属性–定位

是否脱离文档流：标签改变之后原来的位置是否还存在

static – 静态

无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。

relative – 相对定位

相对于标签原来的位置做移动

即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
absolute – 绝对定位

设置为绝对定位的元素框从文档流完全删除，即脱离文档流，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框

注意：

如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位

fixed – 固定定位

以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动，对象脱离正常文档流

回到顶部示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>返回顶部示例</title><style>* {margin: 0;}.d1 {height: 1000px;background-color: #eeee;}.scrollTop {background-color: darkgrey;padding: 10px;text-align: center;position: fixed;right: 10px;bottom: 20px;}</style>
</head>
<body>
<div class="d1">111</div>
<div class="scrollTop">返回顶部</div>
</body>
</html>

**注意：**一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

3.9 `opacity`属性–透明度

用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。

四、`z-index`模态框

以百度登录页面为例：

该界面分为三层：

1、最底部为内容–Z 轴的距离为 0；

2、中间一层半透明的区域–Z 轴的距离为 99；

3、最上层的白色登录区域–Z 轴的距离为 100；

只有定位了的标签才能用 z-index，浮动是不可以使用的

模态框示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>自定义模态框</title><style>.cover {background-color: gray;position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 998;opacity: 0.9;}.modal {background-color: white;position: fixed;width: 600px;height: 400px;left: 50%;top: 50%;margin: -200px 0 0 -300px;z-index: 1000;}</style>
</head>
<body>
zzzzzzzzzzzzzzz
zzzzzzzzzzzzzzz
<div class="cover"></div>
<div class="modal"></div>
</body>
</html>

CSS 选择器及常用属性介绍相关推荐

最常用的css选择器及兼容性 +几个好用却不多见的 nth-child等
你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领 ...
设计中最常用的CSS选择器
准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选择器有以下五类: 一.标签 ...
30个最常用css选择器解析
你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领 ...
html5类选择器用什么表示,HTML_揭秘常用的五类CSS选择器用法，有许多新手朋友不知道在什么 - phpStudy...
揭秘常用的五类CSS选择器用法有许多新手朋友不知道在什么情况下运用什么样的CSS选择器,针对新手朋友,对CSS选择器作一些简单的说明,这里重点介绍一下最常用的五类CSS选择器的使用. 本文向大家描述 ...
HTML笔记——④css样式表、选择器、常用属性
HTML笔记--④css样式表.选择器.常用属性一 CSS 1.1 CSS语法 1.2 CSS样式表 1.2.1 内部样式表 1.2.2 外部样式表 1.2.3 行内样式表 1.3 CSS常用属性 ...
Web学习第四天——CSS简介、选择器，常用（文本、字体、列表、背景、超链接）样式
Web学习第四天--CSS简介.选择器,常用(文本.字体.列表.背景.超链接)样式一.CSS简介 (一).什么是CSS? (二).CSS能够干什么? (三).CSS语法结构 (四).CSS的使用方式 ...
CSS的选择器和常用样式（id，class,组合，字体，背景，宽度，高度，颜色等CSS样式）
<html><head><title>CSS的选择器和常用样式</title><meta charset="UTF-8"/&g ...
常用的css选择符,CSS选择器五大基本选择符
原标题:CSS选择器五大基本选择符 1. *(通配符) *通配符选择器,经常用于css reset(样式重置),清理标签的默认样式,但现在一般不提倡直接使用*了,主要是*会匹配所有标签,相当耗资源.* ...
29.1 CSS介绍、3种使用方式、9种选择器、常用属性、实现注册界面
目录 1 CSS:页面美化和布局控制 2 Css使用方式 2.1 内联样式使用 2.2 内部样式使用 2.3 外部样式使用 3 Css选择器 3.1 基础选择器 3.2 选择器扩展 4 常用属性 5 ...

CSS 选择器及常用属性介绍