关于css:css基础

6次阅读

共计 1551 个字符,预计需要花费 4 分钟才能阅读完成。

一、根底认知

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;齐全通明 

正文完
 0