文章目录
一、css样式表
css：Cacding Style Sheets 层级式样式表
1、行内样式表（内联样式表）
特点：
1、只能适用于单个元素
2、没有实现结构与样式的分离
写法：
<div style="width:100px;height:100px">
</div>
2、内部样式表
特点：
1、适用于多个选择器相同的元素
2、部分实现了结构与样式的相分离
写法：
<head>
<style>
选择器 {
属性: 属性值;
属性: 属性值;
}
</style>
</head>
3、外部样式表
特点：
1、适用于当前站点的所有html文件
2、完全实现了结构于样式的分离
写法：
<link rel="stylesheet" href="css文件的路径">
二、css字体的一些属性
一、字体属性
1、字体的家族属性:font-family
默认的字体家族属性：Micreosoft YaHei 微软雅黑
值可以是中文或者英文，还可以通过unicode编码来设置
例：
font-family:“宋体”;
font-family:SimSun;
font-family:\6977\4F53;
一般使用英文设置
2、字体的大小属性：font-size
字体的默认大小是16px
px是像素的意思
例如：
font-size:28px;
3、字体的粗细：font-weight
例子：
font-weight:bold;（一般用这个）
font-weight:bolder;
font-weight:500;(这里的数字都是整百数)
4、字体倾斜：font-style:italic;或者font-style:oblique;
5、字体的综合设置
注意：位置必须按照一下顺序写，可以缺省
font-style font-weight font-size/line-height font-family
font: oblique bolder 58px Simsun;
二、外观属性
1、颜色属性：color
(1)可以通过英文单词实现
例如：color:red;
(2)可以通过rgb实现
例如：color:rgb(red,green,blue);
(3)可以通过十六进制表示法,0-9,A-F
例如：color:#ff0000;
2、首行缩进：text-indent
例如：text-indent:2em;
单位是em，一个em是一个汉字字符
3、文本居中属性：text-align
例如：text-align:center;
取值：right,center,left
4、文本描述属性：text-decoration
例如：text-decoration:underline;下划线
取值：下划线：underline,上滑线：overline,删除线：line-through
三、css选择器与标签的分类
选择器：通过特定的符号选择指定的元素
选择器的分类：
1、基础选择器：
标签选择器，类名选择器，id选择器，多类名选择器，通配符选择器
2、复合选择器
交集选择器，并集选择器， 后代选择器，子代选择器
3、伪类选择器
一、基础选择器
1、标签选择器
通过标签名获取指定元素
例如：
div{
color:blue;
}
特点：会匹配所有的该名称的元素，匹配范围很大
2、类名选择器
通过类名选获取元素，前面加"."
例如：
.box1{
color:blue;
}
多个类名之间用空格隔开
类名的命名规范:
a.一般由字母数字连接符-组成
b.不要以数字开头
c.要语义化，看到类名就知道是干什么的
d.驼峰命名法
特点：只匹配对应类名的元素
3、id选择器
通过id名获取指定的元素，前面加"#"
特点：不能重复，只能定位到一个元素，id是元素唯一的标识符，不可以重复
4、多类名选择器
多个类名之间用空格隔开
5、通配符选择器
*代表所有
二、复合选择器
1、交集选择器
即是…又是…
语法：两个选择器之间紧挨着，不能加空格
2、并集选择器
语法：多个选择器之间用逗号隔开，且每个选择器独占一行
3、子代选择器
父元素与子元素之间有个>,必须是亲儿子
语法:父元素>子元素
4、后代选择器
父元素与子元素有个空格
语法：父元素 子元素
注意：子代肯定是后代，但后代不一定是子代
三、伪类选择器
伪类选择器：一般用于a标签
清除缓存：ctrl+shift+del
四个阶段：
1、单击前的样式：
选择器:link{
样式代码
}
2、鼠标移动到上面的样式：
选择器:hover{
样式代码
}
3、单击时的样式：
选择器:active{
代码样式
}
4、单击后的样式：
选择器:visited{
代码样式
}
注意：其他标签只有:hover和:active可以使用
四、补充
1、如何去掉a标签的下划线
text-decoration:none;
2、如何去掉ul和ol默认的小点和序号
list-style:none;
3、元素的宽高属性
width:100px;
height:100px;
单位像素px
五、标签显示模式
标签显示模式：块状元素，行内元素，块状行内元素
1、块状元素
hn/p/div/ul/liol/dl/dd/dt/table/thead/caption/tbody/tr/td/th/form/header/footer/section/article/aside/nav
块状元素的特点：
1、有默认的宽高，宽度是父元素的100%，高度是内容撑起来的高度
2、块状元素可以设置宽高
3、独占一行
4、可以包含任何的元素
5、外边距，内边距，边框是可以设置的
注意：h标签不能包含h标签，p标签不能包含p标签
2、行内元素
span/a/b/strong/i/em/u/ins/s/del/label
行内元素的特点:
1、有默认的宽高属性，宽度和高度都是内容所撑起来的
2、行内元素宽高设置时无效
3、不可以包含块元素，可以包含行内元素和文本
4、相邻的行内元素在同一行上显示
5、行内元素边框可以设置，外边距，和内边距水平方向可以设置，垂直方向不可以
3、行内块元素
img/input/select/option/datalist/textarea/button
行内块元素的特点：
1、有默认的宽高
2、可以设置宽高
3、相邻的行内块元素在同一行显示
4、一般不包含其他元素
5、外边距，内边距，边框是可以设置的
4、显示模式之间的转换
1、转换为块状元素
display:block;
2、转换为行内元素
display:inline;
3、转换为行内块元素
display:inline-block;
四、CSS背景
1、背景色属性:background-color
同样也有三种表示方法：英文名称，十六进制，rgb
2、背景图属性:background-image
写法：
backgound-image:url(图片地址);
背景图默认是平铺的
3、背景的平铺属性：background-repeat
no-repeat:不平铺
4、背景的尺寸属性：background-size
水平方向：100px
垂直方向：100px
也可以用百分比，占满元素就是100%
5、背景图的位置属性：background-position
默认的位置在元素的左上角
例子：
background-position:水平 垂直；
background-position:right top; 右上
background-position:left bottom;左下
background-position:right bottom;右下
background-position:center;正中间
也可以通过像素改变
background-position:100px 10px,
也可以通过百分比实现
background-position:100% 0;
6、综合设置
background:背景颜色 图片地址 平铺 背景位置;
五、css书写规范
选择器于{之间要有空格
属性和:之间没有空格
:和值之间要有空格
并集选择器每个独占一行
子代选择器最多不能超过三级
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
