HTML中的CSS

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的复合属性,可以点击三角箭头,可以展开相应的代码