1、css概念:层叠样式表
1.1 html用于描述网页的结构和内容,css美化网页
1.2 需要先有html结构,再写css样式
1.3 css主要 :css选择器,css属性
1.4 css选择器用于选择目标标签使用,一个网页可以有很多标签,给某个或某些标签设置样式,就需要用到选择器
1.5 css属性就是用什么工具化妆
2、语法规则
2.1 css选择器{
css属性名1:css属性值1;
css属性名2:css属性值2;
...}
3、书写位置
3.1 嵌入式:内嵌式,把css代码写进一个style标签中,style标签属于html标签,所以style可以出现在网页的任何地方,出现任意次,建议style标签写在head标签中,嵌入式仅控制当前页面的样式
3.2 外链式:把css样式写在一个单独的css文件中(css文件中,不能写style标签). 通过link标签引入css文件样式表带当前页面中,外链式可以控制控制多个页面的样式
3.3 行内式:通过html的全局属性style设置的,仅能控制当前标签,行内式在js中使用较多,也可以通过style标签中,使用@import关键字引入外链式css文件,@import引用时要写在样式代码的前面
4、引入样式
4.1 通过link标签引入外链式css文件
4.2 通过style标签中引用@import关键字引入外链式css文件
5、css注释
5.1 /*被注释内容*/ Ctrl+/
5.2 被注释的样式不会生效
6、css基本选择器
6.1 标签选择器:选择所有相同标签名的标签,选择器名就是标签名
6.2 类选择器:选择具有这个类名的单个或者多个标签,选择器名是:.class属性值
6.3 多类名选择器:一个标签的class属性值可以设置多个类名,每个类名可以使用"空格"隔开
6.4 id选择器:选择具有这个id属性值的标签,id属性值需要唯一,选择器名:#id属性值
6.5 通配符选择器:选择页面所有标签,选择器名是:*
6.6 给body标签设置字体颜色,会发现整个页面内容的字体颜色都会变成红色,是因为color属性有继承性,但是给body设置边框属性,只有body标签有边框
7、类和id的命名规则
7.1 可以有数字,字母,下划线,短横线
7.2 不能以数字开头
7.3 不能使用单个短横线
7.4 不能使用短横线+数字开头
8、建议
8.1 命名建议使用有意义的名字
8.2 尽量使用驼峰命名法:当有多个单词组成一个词的时候,第一个单词的首字母小写,后面每个单词的首字母大写,如:userName userPwd
9、颜色取值方式
9.1 英文颜色单词
9.2 rgb(0-255,0-255,0-255)
9.3 rgba(0-255,0-255,0-255,0-1)最后一个a表示alpha透明度的意思,取值0表示完全透明,取值1表示完成不透明
9.4 在css中,如果取值是小数时,可以省略0
9.5 十六进制:#+六位或者三位0-9a到f之间的1组成的字符
10、尺寸属性
10.1 百分比一般是相对于父元素而言,但是不是所有的元素(标签)都可以设置宽度高度,比如span,b,strong,i,em,等这些行内元素
10.2 css的width属性设置元素的宽度,取值,数值+css单位 或者百分比
10.3 css的height属性设置元素的高度,取值 数值+css单位或者百分比
10.4 css单位最常见的px(像素),em,rem,vw,vh
10.5 vw是一个长度单位,一个视口单位,是指相对于视口的宽度;视口会被均分为100单位的vw,则1vw等于视口宽度的1%,
10.6 vh,是指CSS中相对长度单位,表示相对视口高度(Viewport Height),1vh = 1% * 视口高度。
11、文本相关属性
11.1 color文本颜色,取值颜色值 英文颜色单词 rgb,rgba,十六进制
11.2 text-align文本水平对齐方式,取值left,center,right
11.3 line-height行高,设置行与行之间垂直的间隔距离,取值数字不带单位(几倍行高),也可以数值带单位,设置行高带单位,比如带px单位
11.4 如果文字只有一行,可以设置行高的值等于高度值,这样可以实现但行文字垂直居中,行高值大于高度值,垂直偏下
11.5 text-decoration文本装饰线,取值underline下划线 none没有线,去掉修饰线 ,overline上划线,line-through删除线
11.6 设置字体大小 :font-size:16px
11.7 设置首行缩进:text-indent:32px
11.8 css单位 em 1em就等于当前一个字体大小
11.9 word-spacing:单词的间距
11.10 lette-spacing:字母或字符的间距
11.11 text-transform:文本转换,转成英文字母的大小写,取值全部大写:uppercase,小写:lowercase,首字母大写:capitalize
12、字体相关样式
12.1 font-size设置字体大小,除了可以写数值+px单位,还可以写"百分比" 百分比相对于父元素的字体大小.默认谷歌浏览器的字体大小是16px
12.2 建议字体大小使用偶数,因为偶数兼容性较好
12.3 font-weight设置字体是否加粗,取值bold加粗,也可以用700表示 normal不加粗,也可以用400表示
12.4 font-style设置字体是否倾斜,取值italic斜体,normal不倾斜
12.5 font-family设置字体名称,取值字体名称,默认微软雅黑,可以同时设置多个字体,从左到右依次匹配,谁能用就用谁,若都不能用,将使用浏览器默认字体
12.6 font简写属性,是可以使用font属性可以所有跟字体相关的属性及行高
12.7 font简写属性,一定要设置字体大小和字体名称,并且顺序不能调换
12.8 其他font-weight,font-style需要放在前面,并且两个的取值可以互换位置
12.9 在字体大小通过/后面设置的就是行高的值
12.10 如果input设置了value属性,使用color就可以设置value字体的颜色
13、调bug
13.1 选择器错误,无法选中目标元素
13.2 属性值写错
13.3 属性名写错
13.4 漏写:或者;
13.5 如果属性值是数值,那么打开浏览器的测试工具,可以按键盘的上或者下方向键(或者滚动鼠标滚轮),进行调整数值测试
13.6 如果是css的复合属性,可以点击三角箭头,可以展开相应的代码