前端学习笔记（CSS基础部分）

前端学习笔记（课程：黑马程序员）

css写在style标签中，style标签一般写在head标签里面，title标签下面

/* css的注释 ctrl+/ /
/ 选择器{css属性} /
/ 选择器：查找标签 */

    p{
    
        /* 文字颜色变红 */
        color: red;
        
        /* 字变大 */
        font-size: 30px;
        /* px是像素 */
        
        /* 背景颜色 */
        background-color: green;
        
        /* width 宽     height 高  */
        width: 400px;
        height: 300px;
    }

css引入方式

内嵌式：css写在style标签中

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

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

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

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

提示：基础班不推荐使用，之后会配合js使用

CSS常见三种引入方式的特点区别有哪些（书写位置，作用范围，使用场景）

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

基础选择器

标签选择器

结构：标签名 {CSS属性名：属性值；}

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

注意点：
1.标签选择器选择的是一类标签，而不是单独某一个
2.标签选择器无论嵌套关系有多深，都能找到对应的标签
3.标签选择器 选中所有的这个标签都生效CSS

类选择器

结构：.类名{css属性名：属性值；}

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

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

id选择器

结构：#id属性值{CSS属性名：属性值；}

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

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

通配符选择器

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

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

注意点：
1.开发中使用极少，只会在极其特殊的情况下才会用到
2.在基础班小页面中可能会用于去除默认的margin和padding

文字和文本样式

字体大小

属性名：font-size

取值：数字 + px

注意点：
默认文字大小是16px
单位需要设置，否则无效

字体粗细

属性名：font-weight

取值：

关键字：

文字效果	关键字
正常	normal
加粗	bold

纯数字：100~900的整百数：

数字效果
正常	400
加粗	700

注意点：
不是所有字体都提供了九种粗细，因此部分取值页面中无变化
实际开发中：正常，加粗两种取值使用最多。

字体样式（是否倾斜）

属性名：font-style

取值：
正常（默认值）：normal
倾斜：italic

文字字体

属性名：font-family

常见取值：具体字体

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

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

如果用户电脑没有微软雅黑，就按黑体显示文字
如果电脑没有黑体，就按任意一种非衬线字体系列显示
font-family: 微软雅黑,黑体,sans-serif;

常见字体系列（了解）

无衬线字体（sans-serif）
1.特点：文字笔画粗细均匀，并且首尾无装饰
2.场景：网页大多数采用无衬线字体
3.常见该系列字体：黑体，Arial

衬线字体（serif）
1.特点：文字笔画粗细不均，并且首尾有笔锋装饰
2.场景：报刊书籍中应用广泛
3.常见该系列字体：宋体，Times New Roman

等宽字体（monospace）
1.特点：每个字母或文字的宽度相等
2.场景：一般用于程序代码编写，有利于代码的阅读和编写
3.常见该系列字体：Consolas,fira code

样式的层叠问题

问题：
给同一个标签设置了相同的样式，此时浏览器会如何渲染呢？

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

TIP:
CSS层叠样式表
所谓层叠即叠加的意思，表示样式可以一层一层的层叠覆盖

字体font相关属性的连写

属性名：font(复合属性)

取值：
font : style weight size family;

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

注意点：如果需要同时设置单独和连写形式
要么把单独的样式写在连写下面
要么把单独的样式写在连写里面

文本缩进

属性名：text-indent

取值：
数字+px
数字+em（一个字的大小）

文本水平对齐方式

属性名：text-align

取值：

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

text-align:center 能让哪些元素水平居中
1.文本
2.span标签，a标签
3.input标签，img标签

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

文本修饰

属性名：text-decoration

取值：

属性值	效果
underline	下划线（常用）
line-through	删除线（不常用）
overline	上划线（几乎不用）
none	无装饰线（常用）

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

行高

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

属性名：line-height

取值：
数字 + px
倍数（当前标签font-size的倍数）

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

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