一、CSS简介
- CSS是一种样式表语言，用于为HTML文档添加布局效果
- CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽、高、边框样式）以及版面的布局和外观显示样式
二、CSS语法规范
selector { property : value;}
selector：择器，表明{ } 中的属性设置将应用于哪些html元素，例如body
property：具体对哪个属性进行设置
value： 要设置的属性值
三、使用CSS的方法
1.内联样式表
内联样式表是在元素标签内部的style属性中设定CSS样式。
<body>
<p style = “ ”></p>
</body>
2.内部样式表
是写到html页面内部，是将所有的CSS代码抽取出来
3.外部样式表
外部样式表将样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用
四、CSS基础选择器
包括：标签选择器、类选择器、id选择器
1.标签选择器
标签选择器{
属性：属性值
…
}
标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。
2.类选择器
.类名 {
属性1：属性值1;
属性2：属性值2；
…
}
如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。
类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。
类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。
不要使用纯数字、中文等命名，尽量使用英文字母来表示。
3.id选择器
#id名 {
属性1: 属性值1;
…
}
id 属性只能在每个 HTML 文档中出现一次
五、CSS字体属性
1.字体大小
CSS使用font-size属性定义字体大小
p{
font-size:20px;
}
单位可用px和%
2.字体粗细
CSS使用font-weight属性定义字体粗细
p{
font-weight:bold;
}
normal：正常 bold：加粗
3.字体样式
CSS使用font-style属性定义字体的显示样式
p{
font-style:normal;
}
normal：正常 italic：斜体 oblique：倾斜
六、CSS文本属性
1.文本颜色color
div {
color: red;
}
颜色可以用十六进制表示，也可以用颜色名称red或RGB值
2.文本缩进 text-indent
div{
text-indent: 20px;
}
3.文本对齐 text-align
div{
text-align: center;
}
居中对齐：center
左对齐：left
右对齐：right
4.文本装饰 text-decoration
div{
text-decoration: underline;
}
none：默认
underline：下划线
overline：上划线
5. 字符间距 letter-spacing
假如你希望p元素里的文本段落的字间距为3个像素，而h1标题的字间距为6像素，代码就可以这样写：
h1{
letter-spacing :6px;
}
p{
letter-spacing :3px;
}
6. 字符转换 text-transform
text-transform用于控制文本的大小写
首字母大写：capitalize
全部大写：uppercase
全部小写：lowercase
不做任何转换：none
h1{
text-transform :uppercase；
}
li {
text-transform :capitalize；
}
七、CSS盒子模型
盒子模型四大元素：content、border、padding、margin
1.content：内容区域
可设置宽度（width）与高度（height）
2.border：边框区域
可设置边框宽度（border-height）、边框样式（border-style）、边框颜色（border-color）
边框样式 border-style 可以设置如下值：
-
none：没有边框即忽略所有边框的宽度（默认值）
-
solid：边框为单实线(最为常用的)
-
dashed：边框为虚线
-
dotted：边框为点线
3.padding：内边距区域
用于设置内边距，即边框与内容之间的距离
padding-top 设置上边距
padding-right 设置右边距
padding-botton 设置左边距
padding-left 设置左边距
4.margin：外边距区域
边框与其他元素的距离，外边距接受任何长度单位、百分数值
margin-top 设置上边距
margin-right 设置右边距
margin-botton 设置左边距
margin-left 设置左边距
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
