1、css:层叠样式
css写在style标签中,style标签一般写在head标签里面,title标签下面
2、 CSS引入方式
内嵌式:CSS 写在style标签中
提示: style标签虽然可以写在页面任意位置,但是通常约定写在head标签中外联式: CSS写在一个外联式:CSS写在单独的.css文件中
·提示:需要通过link标签在网页中引入,在html中输入link后rel后的值是已经写好的,而href中加./后我们可以选择我们要用的文件。
行内式: CSS写在标签的style属性中
·提示:不推荐使用,之后会配合js使用
3、选择器(在HTML中选择元素)
标签选择器(选择的是一类标签,不是单独一个,对这个标签内的所有内容都有效):
结构:标签名(css属性名;属性值)
选择的是一类标签,不是单独一个。
类选择器:
结构:.类名{ css属性名:属性值;}
作用:通过类名,找到页面中所有带有这个类名的标签,设置样式
注意点:
1.所有标签上都有class属性,class属性的属性值称为类名(类似于名字)
2.类名可以由数字、字母、下划线、中划线组成,但不能以数字或者中划线开头
3.一个标签可以同时有多个类名,类名之间以空格隔开
4.类名可以重复,一个类选择器可以同时选中多个标签
id选择器(配合JS使用)
结构:#id属性值{ css属性名:属性值;}
作用:通过id属性值,找到页面中带有这个id属性值的标签,设置样式
注意点:
1.所有标签上都有id属性
2. 是不可重复的!
3.一个标签上只能有一个id属性值
4、一个id选择器只能选中一个标签
<title>Document</title>
<style>
<定义id选择器*/>
#blue {
color:skyblue;
}
</style>
< / head>
<body>
<div id(固定的值必须要写的)="blue">这个div文字是蓝色的</div>
</ body>
</html>
通配符选择器(开发中只会在及特殊情况下使用)
结构:*{ css属性名:属性值;}
作用:找到页面中所有的标签,设置样式注意点,可能会用于去除标签默认的margin和padding:
4、字体和文本样式
字体大小: font-size
取值:数字+px
字体粗细: font-weight
取值:关键字:正常normal 加粗bold;纯数字:正常400 加粗700
字体样式:font-style
字体是否倾斜;正常(默认值)normal,倾斜:italic
字体类型:font-family
直接在后面写什么字体就可以
字体类型:font属性连写
注意点:如果需要同时设置单独和连写形式
要么把单独的样式写在连写的下面
要么把单独的样式写在连写的里面
如果font后的一些属性省略的话,只能省略前两个
如果给一个标签设置了相同的样式,此时样式会重叠,写在最下面的会生效。