本文详细介绍了HTML的局限性和CSS的作用，强调了CSS在美化HTML和布局页面上的重要性。内容涵盖CSS语法规范，基础选择器（标签选择器、类别选择器、ID选择器和通配符选择器）的使用，以及字体和文本属性的设置。此外，还讨论了CSS的引入方式（内部样式表、行内样式表和外部样式表）。最后，文章讲解了盒子模型，包括边框、内边距和外边距的概念及其应用。
1.1 HTML的局限性
无外观样式（只有简单样式）
1.2 CSS（层叠样式表）
也是一种标记语言，主要用于设置HTML页面中的文本（字体，大小，对齐方式等），图片的外形（宽高，边框样式，边距等）以及版面布局和外观显示样式。美化HTML，让HTML更漂亮，页面布局更简单。
总结 1.HTML主要做结构，显示元素内容
2.CSS美化HTML，布局页面
1.3 CSS语法规范
1.css规则由两个主要部分构成：选择器以及一条或多条声明。
2.选择器：指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
3.属性和属性值以“键值对”的形式出现
4.属性是对指定对象设置的样式属性，例如字体大小（font-size），文本颜色（color）等
5.属性与属性值之间用英文“：”分隔开
6.多个“键值对”之间用英文“；”，进行区分
7.属性值前面，冒号后面，保留一个空格
8.选择器和大括号之间有空格
1.4 CSS基础选择器
（1）选择器就是根据不同需求把不同的标签选出来，就是选择标签用的
（2）选择器分为基础选择器和复合选择器
基础选择器是由单个选择器组成的，包括标签选择器，类别选择器和通配符选择器
（3）标签选择器
改一类标签
（4）类别选择器（可以单独选一个或者几个标签）
语法
.类名{
属性1:属性值1；
....
}
用class调用
口诀：样式点定义，（class）调用
一个或多个，开发最常用
注：1.类别选择器用英文“.”,后面紧跟类名（自定义）
2.不适用数字，中文
（5）类别选择器——多类名
使用方式：
（1）在标签class属性中写多个类名
（2）多个类名必须用空格分开
使用场景：调用公共和独有的类
（6）ID选择器
语法
#ID名{
属性1：属性值1；
}
例如
将ID为nav的标签内容设为红色
#nav{
color=red；
}
ID选择器口诀：样式#定义，结构ID调用，只能调用一次，别人请勿使用
（7）通配符选择器
语法
*{
属性1：属性值1；
}
注：通配符选择器不需要调用，自动给所用的元素使用样式
1.5字体属性
（1） font-family（字体）
例如
h2{
font-family："Microsoft yahei" ，Arial
}
注：不同字体逗号分隔，两个及以上加引号
（2）字体大小（font-size）
p{
font-size：16px；
}
（3）字体粗细（front-weight）
p{
font-weight：bold；
font-weight:700;（没有单位）
}
strong标签也可以加粗
（4）字体风格（font-style）
例如：让倾斜的字体不倾斜
em{
font-style：normal；
}
（5）字体复合（顺序）
font：font-style weight size height family
1.6文本属性
（1）颜色
（2）对齐文本（text-align）
（3）装饰文本（text-decoration）
（4）文本缩进（text-indent）
文本的第一行缩进
p{
/*文本的第一行首行缩进 多少距离 */
text-indent:20px;
( 注：如取负20px，则向左靠近）
}
另一种方式
p{
/*font-size:24px;/（无默认字体大小时）
text-indent：2em；
（5）行间距（line-height）
p{
line-height:26px;
}
1.7CSS引入方式
（1）内部样式表：（内嵌样式表）写在html页面内部，是将所有的CSS代码抽取出来，单独放到一个<style>标签里
例如：<style>
div{
color :red;
font -size:12px;
}
</style>
注：1.一般会放到<head>里
2.代码结构清晰，但是并没有实现结构与样式完全分离
3.内部样式表设定CSS，通常也被称为嵌入式引入
（2）行内样式表（是直接在元素标签内部的style属性设定CSS样式，适合修改简单样式）
<div style="color : red;font-size:12px;> 行内样式表 </div>
（3）外部样式表（实际开发都是外部样式表，适合于样式比较多的情况，核心是样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用）
分两步：1.新建一个后缀为.css的样式文件，把所有的CSS代码都放到此文件中。
2.在HTML页面中，使用<link>标签引入这个文件
<link rel="stylesheet" href="CSS文件路径">
盒子模型
1.1盒子模型组成
1.2边框（border）
(1）边框有三部分组成，边框宽度：border-width（px）
边框样式：border-style（solid实线、dashed虚线）
边框颜色 ：border-color
（2） 边框的复合写法
例: border：5px solid red；（没有顺序）
border-top: 1px solid red
1.3表格细线边框 （border-collapse）
例如：table，
td，th{
border:1px solid pink;
font-size: 14px;
text-align:center;
}
1.4内边距（padding）
复合写法（上右下左）
1.5外边距（margin）
（1）外边距可以让盒子水平居中：盒子必须指定宽度（width）
盒子左右外边距设置为auto；
例如：.div{
width:960px;
margin:0 auto;
}
注意：上述方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align：center即可
（2）外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
嵌套块元素垂直外边距塌陷（对于嵌套关系的块元素，父元素有上外边距，同时子元素也有上外边距，此时父元素会塌陷较大的外边距值）
解决方案：（1）可以为父元素定义上边框
（2）可以为父元素定义内边框
（3）可以为父元素添加overflow：hidden
（3）清除内外边距
*{
margin：0；
padding：0；
}
注行内元素尽量只设置左右的内外边距
扫一扫
495
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
