CSS|青训营笔记

68 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第2天

1.什么是CSS

CSS:Cascading Style Sheet 层叠样式表是一组样式设置的规则,用于控制页面的外观样式。 image.png

2.具体语法

给页面中所有的h1选择样式,h1+{}为一条规则 image.png

在页面使用CSS的三种方法

外链(推荐):把CSS的定义放在一个单独的文件,运用link标签引入页面

嵌入:把代码嵌入html

内联:标签写在style属性里,不需要写选择器 image.png CSS是如何工作的 image.png 通配选择器——* image.png 标签选择器

h1{}给页面中所有的h1选择样式 image.png id选择器——#logo{}

通常id为唯一的值 image.png 类选择器

用class给同一类型的标签设置属性,class可出现多次

image.png

属性选择器

【属性条件】{} image.png 状态伪类 hover鼠标移到链接上,颜色变橘; active鼠标按下去则变为红色; focus输入框聚焦状态

first child:第一行 image.png

组合的语法 image.png

选择器组:用逗号隔开,赋予相同的设置

image.png

3.颜色

3.1表示

法一:#+十六进制的六个数

法二:rgb(红,绿,蓝)

法三:输入英文词,例如navy,black image.png #FFFFFF--->#FFF 白色 #000000--->#000 黑色 #FF0000--->#F00 红色 #00FF00--->#0F0 绿色 #0000FF--->#00F 蓝色 #CCCCCC--->#CCC 灰色 #FF7300--->无法简写

颜色hsl(h,s%,l%) image.png

不透明度

alpha=1完全不透明,0透明

image.png

4.字体

给了多种字体,是怕有些字体不一定所有计算机上都有

sans-serif:一个通用字体族 image.png

设置字体大小的几种方法

image.png

设置斜体

image.png

设置字的粗细(只有字体本身支持设计自重)

image.png

4.