css基础

站长
· 阅读数 6
一、基础认知
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;完全透明