CSS的学习笔记

CSS

一．css的引入方法

内嵌式：CSS写在style标签中

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

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

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

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

注：配合js使用

二.基础选择器

1.标签选择器

结构：标签名（css属性名:属性值）

作用：通过标签名，找出页面中所有这类标签，设置样式

注：1.标签选择器选择的是一类标签，而不是单独某一个

        2.标签选择器无论嵌套关系有多深，都能找到对应的标签

2.类选择器

结构：.类名（css属性名：属性值;）

作用：通过类名，找到页面中所有带有这个类名的标签，设置样式

注：1.所有标签上都有class属性，class属性的属性值称为类名（类似于名字）

        2.类名可以由数字，字母，下划线，中划线组成，但不能以数字或者中划线开头

        3.一个标签可以同时有多个类名，类名之间以空格隔开

        4.类名可以重置，一个类选择器可以同时选中多个标签

3.id选择器

结构：#id属性值{css属性名:属性值;}

作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式

注：1.所有标签上都有id属性

        2.id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！

        3.一个标签上只能有一个id属性值

        4.一个id选择器只能选中一个标签（为了JS）

4.通配符选择器

结构：*{css属性名：属性值;}

作用：找到页面中所有的标签，设置样式

注：开发使用极少，只有特殊情况下才会用到（一般用在margin0和padding:0）

三.字体和文本样式

1.字体样式

1. 字体大小：font-size

取值：数字+px

注：谷歌浏览器默认文字大小是16px

单位需要设置，否则无效

       2.字体粗细：font-weight

取值：

关键字：

正常 normal

加粗 bold

纯数字：100-900的整百数

正常 400

加粗 700

注：不是所有字体都提供了九种粗细，因此部分取值页无变化

实际开发中：正常，加粗俩种取值使用最多

        3.字体样式：font-style

取值：

正常（默认值）：normal

倾斜：italic

        4.字体类型：font-family

常见取值：具体字体1，具体字体2...字体系列

具体字体：“微软雅黑”“宋体”等

字体类型：sans-serif,sreif等

渲染规则：

1. 从左往右按照顺序查找，软工电脑中未安装该字体，则显示下一个字体
2. 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体

注：

1. 如果字体的名称中存在多个单词，推荐使用引号包裹
2. 最后一项字体系列不需要引号包裹
3. 网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示                                                                                                                                                                5.字体类型：font属性连写

取值：

font:style weight size family;(顺序是固定的)

省略要求：

只能省略前俩个，如果省略了相当于设置了默认值

注：

要么把单独的样式写在连写的下面

要么把单独的样式写在连写的里面

2.文本样式

1. 文本缩进：text-indent

取值：

数字+px

数字+em一个字的大小（推荐：1em=当前标签的font-size的大小）

        2.文本水平对齐方式：text-align

取值：

属性值  效果

Left 左对齐

Center 居中对齐

Right 右对齐

注：

如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置

        3.文本修饰：text-decoration

取值：

属性值    效果

Underline  下划线（常用）

line-through 删除线（不常用）

Overline    上划线（几乎不用）

None 无装饰性（常用）

注：

开发中会使用text-decoration：none;清除a标签默认的下划线

        4.line-height行高

作用：控制一行的上下行间距

属性名：line-height

取值：

数字+px

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

应用：

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

行高与font连写的注意点：

如果同时设置了行高和font连写，注意覆盖问题

font：style weight size/line-height family;

标签水平居中方法总结margin：0 auto

可以通过margin:0 auto;实现div，p，h水平居中

注：

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