1. CSS 初识
CSS(Cascading Style Sheets) 主要用于美化样式。
CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
2. 样式表
CSS可以写到那个位置？ 是不是一定写到html文件里面呢？
2.1 内部样式表
内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：
<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
2.2 行内样式表
内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
2.3 外部样式表
链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下
<head>
<link href="CSS文件的路径" rel="stylesheet" />
</head>
href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
3. CSS 字体属性
3.1 font-size 字号大小
em 表示文本的字体尺寸
px 像素
3.2 font-family 字体
font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：
p{ font-family:"微软雅黑";}
3.3 font-weight 字体粗细
font-weight属性用于定义字体的粗细，其可用属性值：
normal、bold、bolder、lighter、100~900（100的整数倍）
3.4 font-style 字体风格
{font: font-style font-weight font-size/line-height font-family;}
注意：
1. 使用font属性时，必须按上面语法格式中顺序书写，不能更换顺序，各属性以空格隔开。
2. 其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
4. CSS 外观属性
4.1 color： 文本颜色
预定义的颜色值，如red，green，blue等。
4.2 line-height：行间距
line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px
text-align:水平对齐方式
text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：
left：左对齐（默认值）
right：右对齐
center：居中对齐
4.3 text-indent： 首行缩进
text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。
5. 基础选择器
1. 标签选择器
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者
2. 类选择器
类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签
3. id选择器
id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
4. 通配符选择器
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。
* {
margin: 0; /* 定义外边距*/
padding: 0; /* 定义内边距*/
}
6. 复合选择器
6.1 交集选择器
交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special
6.2 并集选择器
：.one, p, #test{color: #F00;}表示.one和p和#test这三个选择器都会执行颜色为红色。通常用于集体声明。
6.3 后代选择器
子孙后代都可以这么选择。 或者说，它能选择任何包含在内的标签。
6.4 子代选择器
子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 进行连接，注意，符号左右两侧各保留一个空格。
7. 伪类选择器
伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第n个元素。
7.1、1. 链接伪类选择器
:link /* 未访问的链接 */
:hover /* 鼠标移动到链接上 */
:active /* 选定的链接 */
:visited /* 已访问的链接 */
8. 标签显示模式
8.1. 块状元素
每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。
常见的块元素有h1-h6/p/div/ul/li/ol/dl/dd/dt/table/tr/td/caption/form等，其中<div>标签是最典型的块元素。
块级元素的特点：
1、有默认的宽高，宽是父元素的100%，高度是内容所撑起来的高度
2、宽高可以设置
3、独占一行
4、可以容纳任意的元素（h/p元素不能容纳块状元素）
5、可以设置外边距和内边距的。
8.2 行内元素
行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。
行内元素的特点：
1、有默认的宽高，宽高是内容所撑起来的
2、宽高设置是无用的
3、相邻的行内元素或者行内块元素在同一行上显示
4、只可以容纳行内元素与内容
5、水平方向上的外边距和内边距可以设置，垂直方向设置无用
8.3 行内块元素
在行内元素中有几个特殊的标签——<img />、<input />、<label>、<select>、<option>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
行内块元素的特点：
1、有默认的宽高，是元素本身的宽高
2、宽高是可以设置的
3、相邻的行内元素或者行内块元素在同一行上显示
4、一般不容纳其他元素
5、外边距和内边距都是可以设置的
8.4 标签显示模式转换
块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块： display: inline-block;
9. CSS 背景
background-color 背景颜色
background-image 背景图片地址
background-repeat 是否平铺
background-position 背景位置
background-attachment 背景固定还是滚动
背景的合写（复合属性）
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
9.1 背景图片
语法： background-image : none | url (url)
9.2 背景平铺
语法： background-repeat : repeat | no-repeat | repeat-x | repeat-y
9.3 背景位置
语法：background-position : length || length，background-position : position || position
9.4 背景附着
语法：background-attachment : scroll | fixed
参数：scroll : 背景图像是随对象内容滚动fixed : 背景图像固定
9.5 背景简写
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
本文详细介绍了CSS的基础知识，包括内部样式表、行内样式表和外部样式表的使用，以及字体属性如字号、字体、粗细和风格的设置。此外，还讲解了文本颜色、行间距、对齐方式等外观属性，以及基础选择器的应用，如标签选择器、类选择器和ID选择器。同时，文章涵盖了块状元素、行内元素和行内块元素的显示模式及其转换，以及背景属性的设置，如背景颜色、图片、平铺、位置和附着。
606
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
