1. CSS的概念
CSS是美化HTML的工具。可以理解为:HTML定义了网页的内容,CSS负责美化。
CSS的优势:
- 功能强大
- 将内容展示与样式控制分离:
- 降低耦合度,解耦
- 让分工协作更容易
- 提高开发效率
2. CSS样式分类
包括:行内样式、内部样式、外部样式。
范围上:外部>内部>行内
优先级上:行内>内部>外部
优先级的体现:当多个样式作用在一个标签的时候,重复的样式按就近原则,不重复的则叠加显示。
2.1 行内样式
直接写在标签内的style属性里。缺点:耦合度高。仅对当前标签生效。此样式仅在测试的时候使用。
<div style="color: red;">hello my css</div>
2.2 内部样式
定义在head标签里,在style标签里写css代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内部样式</title>
<style>
div{
color: red;
}
</style>
</head>
<body>
<div>hello my css</div>
</body>
</html>
2.3 外部样式
将css代码以.css文件的形式保存。在要生效的html页面的head里面加入对此css文件的引用。
- css文件内容:
div {
color: red;
}
html的内容:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外部样式</title>
<link rel="stylesheet" href="css/lina.css" />
</head>
<body>
<div>hello my css</div>
</body>
</html>
tips:在工具里直接打link就可以显示要引入的css文件了。
3. CSS语法
选择器{
属性1: 值1;
属性2: 值2;
...
}
3.1 选择器分类
包含id选择器、class选择器、标签选择器。
范围:标签>class>id
优先级:id>class>标签
样式冲突时,以优先级高的为准。不冲突时,叠加显示。
3.1.1 id选择器
作用于所有相同id的标签。由于html的标签id的唯一性,因此此种选择器的结果类似于行内样式(用的少)。
定义的时候,以#
开头。
#myDiv{
color: red;
}
3.1.2 class选择器
class选择器能够作用于多个有相同class属性的标签。
定义的时候,以.
开头。
.pinkColor{
color: deeppink;
}
注意:类名第一个字符不能是数字,它无法在Mozilla和Firefox中生效。
3.1.3 标签选择器
作用范围:所有的这一种标签
p{ /*作用于段落 */
color: "red";
}
3.2 复合选择器
由两个或多个基础选择器,通过不同方式组合而成的。
可以更准确更精细的选择目标元素标签。
3.2.1 全局选择器
语法:* {}
一般去掉标签的一些默认效果的时候使用,或者整站通用效果时使用。但是不推荐,一般将 * 替换为常用标签的名称,并用逗号分隔,其实就是使用并集选择器。
a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var {
margin: 0;
padding: 0;
}
- 通常我们需要在css编写开始的时候,去除浏览器的样式。比如把margin设置为0,padding设置为0。
- 另外还要把超链接标签a设置text-decoration为none。
3.2.2 并集选择器
并集选择器(CSS选择器分组)是各个选择器通过,连接而成的,通常用于集体声明。
语法:选择器1,选择器2,......选择器N{}
意思是多个选择器都是通用的样式。任何形式的选择器(包括标签选择器、class类选择器id选择器等),都可以作为并集选择器的一部分。
3.2.3 交集选择器
条件:交集选择器由两个选择器构成,找到的标签必须满足:既有标签一的特点,也有标签二的特点。
语法:h3.class{ color:red; }
其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格,例如div.list。
交集选择器是并且的意思。 即…又…的意思
3.2.4 后代选择器
概念:后代选择器又称为包含选择器。
作用:用来选择元素或元素组的子孙后代。
其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔,先写父亲爷爷,在写儿子孙子。
.class h3{
color:red;
font-size:16px;
}
3.2.5 子元素选择器
作用:子元素选择器只能选择作为某元素子元素(亲儿子)的元素。
其写法就是把父级标签写在前面,子级标签写在后面,中间跟一个 > 进行连接。
语法:
.class>h3{
color:red;
font-size:14px;
}
3.2.6 伪类选择器
伪类选择器:和类选择器相区别类选择器是一个点 比如 .demo {} 而我们的伪类 用 2个点 就是 冒号 比如 :link{} 。
作用:用于向某些选择器添加特殊的效果。比如给链接添加特殊效果, 比如可以选择 第1个,第n个元素。
因为伪类选择器很多,比如链接伪类,结构伪类等等。我们这里先给大家讲解链接伪类选择器。
- a:link /* 未访问的链接 */
- a:visited /* 已访问的链接 */
- a:hover /* 鼠标移动到链接上 */
- a:active /* 选定的链接 */
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
/*伪类选择器*/
a:link{
color: red;/*默认颜色是红色*/
}
a:visited{
color: blue;/*访问过的页面是蓝色*/
}
a:hover{
color: green;/*鼠标悬浮是绿色*/
font-size: 28px;
}
a:active{
color: gold;/*按下鼠标不放手是金色*/
font-family: "微软雅黑";
}
</style>
</head>
<body>
<a href="03-常用样式.html" target="_blank">常用样式</a>
<a href="04-盒子模型1.html" target="_blank">盒子模型</a>
<a href="05-综合练习.html" target="_blank">综合练习</a>
</body>
</html>
注意
- 写的时候,他们的顺序尽量不要颠倒 按照 lvha(四类的首字母) 的顺序。否则可能引起错误。
- 因为叫链接伪类,所以都是利用交集选择器 a:link a:hover
- 因为a链接浏览器具有默认样式,所以我们实际工作中都需要给链接单独指定样式。
- 实际开发中,我们很少写全四个状态,一般我们写法如下:
a { /* a是标签选择器 所有的链接 */
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover { /* :hover 是链接伪类选择器 鼠标经过 */
color: red; /* 鼠标经过的时候,由原来的 灰色 变成了红色 */
}
3.2.7 复合选择器比对
选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
---|---|---|---|---|
后代选择器 | 用来选择元素后代 | 是选择所有的子孙后代 | 较多 | 符号是空格 p .one |
子代选择器 | 选择 最近一级元素 | 只选亲儿子 | 较少 | 符号是**>** .nav>p |
交集选择器 | 选择两个标签交集的部分 | 既是 又是 | 较少 | 没有符号 p.one |
并集选择器 | 选择某些相同样式的选择器 | 可以用于集体声明 | 较多 | 符号是逗号 .nav, .header |
链接伪类选择器 | 给链接更改状态 | 较多 | 重点记住 a{} 和 a:hover 实际开发的写法 |
3.2.8 注意事项
注意优先级的问题。之前提到单一选择器的优先级:
id>类>标签
我们可以将id选择器优先级=100,类优先级=10,标签=1。这样就可以知道复合选择器的优先级:
.ul2 li
的优先级为11;li.a
的优先级为2;.ul2 .space
的优先级为20;
应用:对应多个重名的css样式,以高优先级选择器定义的为准;优先级相同时就近原则。
4 CSS常用样式
4.1 color:字体颜色
取值方式:
- 颜色的单词:
red
、blue
- rgb(红绿蓝):
rgb(255,0,0);
- rgba(红、绿、蓝、透明度):透明度0-1,全透明1,不透明0.
- #值1值2值3:值的范式是00-FF 十六进制组成,例如:#FF0000。
4.2 width height:宽高
PS:只有块元素可以设置宽高,行级元素设置不生效。
取值方式有2种:
- 数值:绝对数字,单位是像素
- 百分比:占据父元素的比例
块状元素默认宽度为父元素宽度(100%),默认高度为里面所有元素叠加的高度。
4.3 背景样式
- background-color:red【背景色】
- background-image:url(img/submit.gif)【背景图片】
- background-repeat:【平铺方式】
repeat-x 横轴平铺
repeat-y 纵轴平铺
repeat 都平铺
no-repeat 不平铺 - background-position:30px 20px;【背景位置,第一个值表示横轴偏移量,第二个值表示纵轴偏移量】
.bg{
background-color: beige;
background-repeat: repeat;
width: 80%;
}
4.4 文本样式
- font-size:字号
- font-family:字体
- font-weight:字重,bold表示加粗。
- text-decoration:文本划线位置
- text-align:文本水平对齐方式
- line-height:行高。如果想要文本垂直居中,单行文本可以设置行高=高度。多行可以使用盒子模型
- letter-space:字之间的间距(像素单位)
.text{
font-family: "微软雅黑";
font-size: 30;
font-weight: bold;
text-align: center;
text-decoration: line-through;
}
.text-vertical-align{
height: 30px;
line-height: 30px;
background-color: burlywood;
}
4.5 列表样式
- list-style-color:列表标记颜色
- list-style-type:列表标记样式
- list-style-image:用图片做标记
- list-style-position:列表标记摆放位置。outside:至于文字外部 inside:和文字放一起。下面是outside的样式。
- list-style:none 常用设置,无标记。
li{
background-color: lavenderblush ;
height: 50px;
line-height: 50px;
list-style-image: "img/a.png";
list-style-position: outside;
list-style-type: square;
}
4.6 边框样式
- border-width:
- border-color:
- border-style:dashed、solid、dotted
- border-top-***:设置顶边框
- border-bottom-***:设置底边框(同理可设置左右边框)
- border:solid 1px #ccc 常用的细边框样式
.border{
border-color: #ccc;
border-width:1px;
border-style:solid;
}
5 盒子模型
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
盒子模型说明图:
5.1 盒子的宽度和高度
首先默认情况下,元素内设置的width和height是内容的宽度和高度。
此时,当我们计算一个元素实际在页面占有的总宽度计算公式是这样的:
总元素宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的:
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
5.2 设置box-sizing属性来确认我们设置的宽高属性是针对哪个部分的
- content-box:设置的width和height是内容的宽高。
- border-box:设置的width和height是最外围的宽高。
6 Display(显示) 与 Visibility(可见性)
6.1 两者的区别
display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏。
隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为"hidden"。但是请注意,这两种方法会产生不同的结果。
-
visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。
-
display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。
6.2 display 改变元素的类型
CSS样式有以下三个:
- display:block – 显示为块级元素
- display:inline – 显示为内联元素
- display:inline-block – 显示为内联块元素,表现为同行显示并可修改宽高内外边距等属性