css基础

一、基础认知

1.css又称层叠样式表
2.美化html 给html增加样式

二、语法规则

1.css写到style标签中，style标签一般写到head标签里，title下
2.css的标点符号是英文的
3.键值对后有分号

三、css属性

color 文字颜色
font-size 文字大小
background-color 背景颜色
width：200px 标签宽度（带单位）
height：100px 标签高度（带单位）

四、引入方式

1.内嵌式：css写道style标签中  范围：当前网页 使用场景：小demo
2.外链式：（常用）css写到单独的css文件中 link引入 项目中使用 配合js使用
3.行内式：（少用）写到标签的style属性中

五、基础选择器

1.标签选择器：利用标签名字选择元素  标签名{属性名：属性值}
    注意：
        ①不可进行差异化设置，若设置，会导致所有标签都变动
        ②无论嵌套多深，都会找到对应标签（与写到哪里无关）
2.类选择器  .类名{属性名：属性值}
    ①找到要选择的标签，给这个标签增加class属性，属性值随笔那定义
    ②在css样式中使用 ‘.+类名’ 的方式调用
    ③一个标签可以有多个类名
3.id选择器  #id属性值{属性名：属性值}
    ①所有标签都有id属性
    ②id属性在页面中唯一且不可重复
    ③一个标签只有一个id属性值
4.通配符选择器 ✳{属性名：属性值}
    选择页面中所有的标签，设置统一样式

六、字体和文本的样式

1.字体样式
    ①字体大小 font-size 取值：数字+px  谷歌默认16px
    ②字体粗细 font-weight 取值：100-900（整数，数字越大，越粗） 常用 400 700
    ③字体样式 font-style italic倾斜 normal正常
    ④字体复合写法 font：style weight size family
                 顺序要求：swsf
                 省略要求：只能省略前两个，如省略，相当于设置了默认值
                 注意点：如需同事色织单独和连写形式
                        要么把单独的样式写到连写下边
                        要么把单独的样式写到连写里边
2.文字样式 根据字体大小设置
    ①文字缩进（首行缩进） em单位（相对单位） 相对于文字大小来进行计算
    ②文本水平对齐方式（只能在独占一行的元素添加）
        属性名：text-align （left，center，right）
        注意：如果需要让文本水平居中，text-align属性给文本所在标签的父元素设置
3.文本修饰 text-decoration（鼠标悬停）
    装饰线：decoration
    清空下划线：text-decoration：none
    上划线：text-decoration：overline
    中横线：text-decoration：line-through
4.水平居中方法 text-align：center
    可让文本 span标签 a标签 input标签 img标签（放在独占一行的元素里）
    注意：需要给父元素设置 margin：0 auto；
    让大盒子居中，直接给当前元素本身设置 需要设置盒子本身的宽度
    一般针对于固定宽度的盒子，如大盒子本身没有设置宽度，此时会默认占满父元素的宽度
5.行高 line-height
    作用：控制行家女
    取值：数字+px
    应用：
         ①让单行文本垂直居中可设置，文字父元素行高
         ②网页精准布局时，会设置行高line-height：1，可取消上下间距

七、Chrome调试工具 修改和调试样式（定位错误点） F12

1.打开方式
2.选择元素
3.调试样式
4特殊情况（删除线，小三角）

八、颜色的常见取值

1. 0-9 A-F 十六进制取值（可用取色器获取颜色值 开发时使用较多）
2. div{color：red}
3. rgb（255，255，255） 255可表示0-255的取值
4. 半透明色 color:rgba(num，num，num，0-1)
    0表示完全透明
    1表示完全不透明
5.透明色
    color：transparent；完全透明