一 概念
css是一种样式表语言，用于为HTML文档控制外观，定义布局。例如，
css涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面 。
注意：
css可将页面的内容与表现形式分离，页面内容存放在HTML文档中，而用
于定义表现形式的CSS在一个.css文件中或HTML文档的某一部分。
二 css与HTML的关系
HTML是网页内容
CSS定义页面的样式
三 基本语法
样式表：
1.行内样式表
行内样式表：是通过标签的
style
属性来设置元素的样式，其基本语法格式如下：
<
标签名
style="
属性
1:
属性值
1;
属性
2:
属性值
2;
属性
3:
属性值
3;">
内容
</
标签名
>
2.内嵌样式表
内嵌式样式表是将
CSS
代码集中写在
HTML
文档的
head
头部标签中，并且用
style
标签定义
<html>
<head>
<title>
样式规则
</title>
将内嵌样式表放在此处
<style></style>
</head>
<body>
</body>
</html>
3.外部样式表
外部样式表是将所有的样式放在一个或多个以
.CSS
为扩展名的外部样式表文件中，通
过
link
标签将外部样式表文件链接到
HTML
文档中
使用link（链接）标签 :
<head>
<link href="引入样式的文件" rel="stylesheet " type=" text /css">
<style type=" text /css">
</style>
选择器:
1.标签选择器：通过标签选择器可以选择页面中的所有指定标签
语法：标签名
{}
2.类选择器：通过标签的
class
属性值选中一组标签
语法：
.class
属性值
{}
3.id
选择器：通过标签的
id
属性值选中唯一的一个标签
语法：
#id
属性值
{}
4.通配选择器
:
可以用来选中页面中的所有的标签
语法：
*{}
文本修饰:
color
：字体颜色
font-size
：字体大小
font-family
：字体
text-align
：文本对齐
text-decoration:line-through
：定义穿过文本下的一条线
text-decoration:underline
：定义文本下的一条线
text-decoration:none
：定义标准的文本
font-style: italic;
斜体文本
font-weight:
字体粗细
line-height:
设置行高
背景修饰:
background-color:背景颜色
background-image
背景图片
background-repeat
背景重复
background-size
背景尺寸
background- position
背景位置
CSS的列表属性
CSS
列表属性可以放置、改变列表项标志，或者将图像作为列表项标志 。
list-style-image ：将图象设置为列表项标志。
list-style-position ：
设置列表中列表项标志的位置。
list-style-type ：
设置列表项标志的类型。
list-style：
简写属性。
CSS伪类
CSS伪类专门用来表示标签的一种的特殊的状态，当我们需要为处在这些特殊状
态的标签设置样式时，就可以使用伪类 。
伪类的语法
：
:hover伪类表示鼠标移入的状态
:active表示的是被点击的状态
:focus向拥有键盘输入焦点的标签添加样式。
透明度
定义透明效果的属性是
opacity
。
opacity
属性设置标签的不透明级别 值为
1
。
规定不透明度：从
0.0
（完全透明）到
1.0
（完全不透明）。
块级,行级,行级块标签
1.块级标签
无论内容多少 都会独自占据一行的，可以进行修饰。
例如<p>、<h1>、<ul>、<ol>、<hr/>等。
2.
行级标签
只占自身大小的标签，不会占一行，但是不能进行修饰。
例如<font>、<b>、<i>、<a>等。
3.行块级标签
不会独自占一行，但是可以进行修饰。
例如 <input/> <img>等
Display
通过
display
样式可以修改标签的类型。
block
：设置标签为块标签
inline
：设置标签为行级标签
inline-block
：设置标签为行级块标签
div和span
1.div
标签
div
是块级标签，可以放置任何标签。
div
没有任何附加功能，给了什么属性就能变成什么样。
div
主要的作用是被用来布局网页。
2.span
标签
span
是行级标签
span
没有任何附加功能，给了什么属性就能变成什么样。
span
标签被用来选中文档中的文字。
盒子模型
在制作网页是可以将一个个模块看作是一个个盒子，所有的标签都放置在这一个个盒子当中，然后将一个个盒子放置在需要的地方。
一个盒子分为四个部分
1.内容区（content）：内容区指的是盒子中放置内容的区域，也就是标签中的文本内容，子标
签都是存在于内容区中的。通过width和height两个属性可以设置内容区的大小而不是整个盒子的大
小。
2.内边距(padding)：
3.边框(border）
4.外边距（margin）
注意：
1.如果没有为标签设置内边距和边框，则内容区大小 默认和盒子大小是一
致的。
2.width和height属性适用于块标签。
盒子模型：内边距
内边距指的就是标签内容区与边框以内的空间。
内边距会影响整个盒子的大小。
使用
padding
属性来设置标签的内边距。
例如：
padding-left:10px;
padding-right:10px;
padding:10px 20px 30px 40px
这样会设置标签的上、右、下、左四个方向的内边距。
padding：10px
内边距上下左右全部是10px
padding：10px 20px
内边距上下是10px，左右是20px
盒子模型：边框
可以在标签周围创建边框，边框是标签可见框的最外部。
可以使用border属性来设置盒子的边框：
border:1px red solid;
上边的样式分别指定了边框的宽度、颜色和样式。
也可以使用border-top/left/right/bottom分别指定上右下左 四个方向的
边框。
边框可以设置样式：
dotted （点线） dashed （虚线） solid （实线） double （双线）
groove （槽线）
border-radius设置四个角为圆角边框
border-top-left-radius设置左上为圆角边框
盒子模型：外边距
外边距是标签边框与周围标签相距的空间。 使用margin属性可以设置
外边距。用法和padding类似，同样也提供了四个方向的 。
margin-top/right/bottom/left。
margin的值可以为负值。
margin的值还可以auto，设置外边距为最大值，当将左右外边距设置为
auto时，浏览器会将左右外边距设置为相等.
垂直设置为auto时值为0，所以水平居中也可以简写为margin:0 auto。
外边距不会影响盒子的整体大小，但是会影响盒子的位置，会影响盒子
的实际控制范围。
清除浏览器的默认样式
浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所
以为很多的标签都设置了一些默认的
margin
和
padding
，而它的这些默
认样式，正常情况下我们是不需要使用的。
所以我们往往在编写样式之前需要将浏览器中的默认的
margin
和
padding
统统
的去掉。
*{
margin: 0;
padding: 0;
}
*文档流
文档流指的是文档中的标签在排列时所占用的位置。 将窗体自上而下分
成一行行 ，并在每行中按从左至右的顺序排放标签，即为文档流。
也就是说在文档流中标签默认会紧贴到上一个标签的右边，如果右边不
足以放下标签，标签则会另起一行，在新的一行中继 续从左至右摆放。
这样一来每一个块标签都会另起一行，那么我们如果想在文档 流中进行
布局就会变得比较麻烦。
*浮动
所谓浮动指的是使标签脱离原来的文档流，在父标签中浮动起来。
浮动使用
float
属性。
可选值：
none
：不浮动
left
：向左浮动
right
：向右浮动
当一个块级标签浮动以后，宽度会默认是内容的宽度，所以当漂浮一个块级标签时我
们 都会为其指定一个宽度。
当一个标签浮动以后，其下方的标签会上移。
浮动会使标签完全脱离文档流，也就是不再在文档中在占用位置标签浮
动以后即完全脱离文档流
,
这时不会再影响父标签的高度
,
也就是浮动标签
不会撑开父标签。
*清除浮动
clear属性可以用于清除标签周围的浮动对标签的影响,其他标签的位置不
发生变化。
可选值：
left ： 忽略左侧浮动
right ：忽略右侧浮动
both ：忽略全部浮动
CSS定位
1.相对定位
position：relative开启相对定位
相比与原位置的距离
可以通过
left right top bottom来设置标签的偏移量
相对定位不能脱离文档流
相对定位是相较与原来的位置进行移动
2.绝对定位
运用绝对定位的标签会导致其
脱离文档流，相当于浮动起来，会与其他标签进行重叠
position: absolute开启绝对定位
同样可以用left right top bottom来设置标签的偏移量
开启绝对定位后一般是相较于与
离他最近的开启了定位的父级标签作为初始，如果所有的父级标签都没有开启定位，会以浏览器的窗口作为初始，所以一般要用绝对定位是要开启一个父级标签的定位
扫一扫
645
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
