前端学习 课堂笔记 CSS篇（一）

CSS引入方式

引入方式	书写位置	作用范围	使用场景
内嵌式	css写在style标签中	当前页面	小案例
外联式	CSS写在一个单独的.css文件中，需要通过link标签在网页中引入	多个页面	项目中
行内式	css写在标签的style属性中	当前标签	配合js使用

基础选择器

1、标签选择器--以标签名命名的选择器，所有的这个标签都生效
2、类选择器

结构:.类名{ css属性名:属性值;}
作用:通过类名，找到页面中所有带有这个类名的标签，设置样式注意点:
1. 所有标签上都有class属性，class属性的属性值称为类名(类似于名字)2．类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头3.一个标签可以同时有多个类名，类名之间以空格隔开
4．类名可以重复，一个类选择器可以同时选中多个标签 

 div用来网页布局，一个页面可能用无数次，原则:如果使用div ,尽量使用类名控制样式

 3、id选择器

结构: #id属性值{ css属性名︰属性值;}
作用:通过id属性值，找到页面中带有这个id属性值的标签，设置样式注意点:

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

4、通配符选择器

结构: *{ css属性名:属性值;}
作用:找到页面中所有的标签，设置样式注意点:
1．开发中使用极少，只会在极特殊情况下才会用到
2．在基础班小页面中可能会用于去除标签默认的margin和padding

字体和文本样式

1.字体样式 

1.字体大小: font-size

属性名: font-size取值:数字＋px

注意点:

• 谷歌浏览器默认文字大小是16px
• 单位需要设置，否则无效

2.字体粗细:font-weight

正常	normal
加粗	bold

3.字体样式: font-style

正常	normal
加粗	italic

4.字体类型: font-family

无衬线字体(sans-serif)

• 特点:文字笔画粗细均匀，并且首尾无装饰
• 场景:网页中大多采用无衬线字体
• 常见该系列字体:黑体、Arial

衬线字体(serif)

• 特点:文字笔画粗细不均，并且首尾有笔锋装饰
• 场景:报刊书籍中应用广泛
• 常见该系列字体:宋体、Times New Roman

 等宽字体（monospace）

• 特点:每个字母或文字的宽度相等
• 场景:一般用于程序代码编写，有利于代码的阅读和编写
• 常见该系列字体:Consolas、fira code

 注意点：如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖)，写在最下面的会生效

属性名: font(复合属性)

取值:font : style weight size family;

省略要求:
只能省略前两个，如果省略了相当于设置了默认值

注意点:如果需要同时设置单独和连写形式

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

文本缩进

属性名：text-indent

取值：px/em（推荐em，1em =当前标签的font-size的大小）

水平对齐

属性名: text-align

属性值	效果
left	左对齐
center	居中对齐
right	右对齐

text-align : center 能使文本、span标签、a标签、input标签、img标签居中

文本修饰

属性名: text-decoration

取值：

属性值	效果
underline	下划线
line-through	删除线
overline	上划线
none	无装饰线

 行高属性名：line-height

取值：

• 数字+px
• 倍数：（当前标签front-size的倍数）

 应用：

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

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

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

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

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

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

text-align:center 文字居中，不是标签居中

盒子内减模式：box-sizing:border-box;

垂直布局中的块级元素，上下的margin会合并并保留最大值，只需要给一个盒子设置margin就好

互相嵌套的块级元素，子元素的margin-top会作用在父元素之上，导致父元素随之一起变化

解决办法：

1. 给父元素设置border-top或者padding-top(分隔父子元素的margin-top)
2. 给父元素设置overflow: hidden
3. 转换成行内块元素
4. 设置浮动

margin和padding无法改变行内标签的垂直位置