CSS的基础知识（1）

1、什么是css

• CSS是层叠样式表的简称，或称CSS样式表或级联样式表；
• CSS是一种标记语言；
• 主要用于设置HTML页面中的文本内容、图形外形以及版面的布局和外观显示样式。

2、CSS的语法规范

• CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。

 3、CSS的属性值

 常见属性：

注意：

1. CSS 标点符号都是英文状态下的
2. 每一个样式键值对写完之后，最后需要写分号

 4、CSS引入方式

 1、内嵌式：CSS 写在style标签中

提示：style标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中

2、外联式：CSS 写在一个单独的.css文件中

<link rel="stylesheet" href="css文件路径">

提示：需要通过link标签在网页中引入

3、行内式：CSS 写在标签的style属性中

<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>

提示：配合js使用

4、CSS 引入方式总结

 5、基础选择器

5.1 标签选择器

• 结构：标签名 { css属性名：属性值；}
• 作用：通过标签名，找到页面中所有这类标签，设置样式

注意点：

• 标签选择器选择的是一类标签，而不是单独某一个
• 标签选择器无论嵌套关系有多深，都能找到对应的标签

5.2 类选择器

• 结构：.类名 { css属性名：属性值； }
• 作用：通过类名，找到页面中所有带有这个类名的标签，设置样式

注意点：

1.  所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
2.  类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
3.  一个标签可以同时有多个类名，类名之间以空格隔开
4.  类名可以重复，一个类选择器可以同时选中多个标签

5.3 id选择器

• 结构：#id属性值 { css属性名：属性值； }
• 作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式

 注意点：

1. 所有标签上都有id属性
2. id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！
3. 一个标签上只能有一个id属性值
4.  一个id选择器只能选中一个标签

5.4 通配符选择器

• 结构：* { css属性名：属性值； }
• 作用：找到页面中所有的标签，设置样式

注意点：

1. 开发中使用极少，只会在极特殊情况下才会用到；
2.  一般用来清除内外边距,如下代码。

     

 6、字体和文本样式

6.1 字体系列——font-family

p { font-family:"微软雅黑";}
div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}

• 各种字体之间必须使用英文状态下的逗号隔开
• 一般情况下,如果有空格隔开的多个单词组成的字体,加引号.
•  尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
• 最常见的几个字体：body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; }

6.2 字体大小——font-size

p { 
   font-size: 20px; 
}

•  px（像素）大小是我们网页的最常用的单位
• 谷歌浏览器默认的文字大小为16px
• 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
• 可以给 body 指定整个页面文字的大小

 6.3 字体粗细——font-weight

p { 
   font-weight: bold; 
}

•  实际开发时，我们更喜欢用数字表示粗细

6.4 文字样式——font-style

p { 
   font-style: normal; 
}

注意： 平时我们很少给文字加斜体，反而要给斜体标签（em，i）改为不倾斜字体。

6.5 字体复合属性

body { 
      font: font-style font-weight font-size/line-height font-family; 
}

• 使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
• 不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

6.6 字体属性总结

 7、CSS 文本属性

7.1 文本颜色——color

div { 
     color: red; 
}

补充：

 

 注意：开发中最常用的是十六进制

7.2 文本对齐——text-align

div {
     text-align: center; 
}

 补充：

1、水平居中方法总结 text-align : center 

text-align : center 能让那些元素水平居中？

1. 文本
2.  span标签、a标签
3. input标签、img标签

注意点：
如果需要让以上元素水平居中， text-align : center 需要给以上元素的 父元素 设置

2、水平居中方法总结 margin : 0 auto

如果需要让div、p、h（大盒子）水平居中？

• 可以通过margin : 0 auto ; 实现

注意点：

1. 如果需要让 div、p、h（大盒子） 水平居中，直接给 当前元素本身 设置即可
2. margin：0 auto 一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度

7.3 装饰文本——text-decoration

div { 
     text-decoration：underline；
}

 7.4 文本缩进——text-indent

div {
     text-indent: 10px;
}

通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。

p {
   text-indent: 2em;
}

em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。

7.5 行间距——line-height

p {
   line-height: 26px;
}

• 数字+px

p {
   line-height: 1.5em;
}

• 倍数（当前标签font-size的倍数）

 应用：

1. 让单行文本垂直居中可以设置 line-height : 文字父元素高度
2. 网页精准布局时，会设置 line-height : 1 可以取消上下间距

行高与font连写的注意点：

1. 如果同时设置了行高和font连写，注意覆盖问题
2. font : style weight size/line-height family ;

7.6 文本属性总结