likes
comments
collection
share

css基础

作者站长头像
站长
· 阅读数 27

一、基础认知

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;完全透明