css引入
内联样式
将样式直接写在元素的style属性上
多条css样式之间用分号;隔开，建议每条css样式后面都加上分号；
在很多国内外资料中，"css样式“与”css属性“是同义词
- 样式名-> 属性名
- 样式值-> 属性值
文档样式表、内嵌样式表
- 将样式写在head 元素的style 元素中
- <style>元素的属性值默认是text/css
外部样式表
将样式写在单独的css文件中，然后在当前网页的head元素中用link元素引用
<link rel="stylesheet">元素的type属性值默认是text/css
在css文件中使用@charset指定文件编码，一般都是UTF-8
@import
可以在style 元素或者css文件中使用@import导入其他的css文件
不建议使用@import导入css文件，它的效率比link元素低
css选择器
通用选择器
*{
color:red;
}
- 一般用来给所有元素作一些通用性的设置
- 比如内边距、外边距
- 效率比较低，尽量不要使用
元素选择器
div{
color:red;
}
或者叫”标签选择器“
类选择器
.one{
color:red;
}
class值有one的元素
注意
- 一个元素可以有多个class值，每个class之间用空格隔开
- class值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以使用驼峰标识
- 最好不要用标签名作为class值
id选择器
id值为one的元素
#one{
color:red;
}
注意
- 一个HTML文档里面的id 值是唯一的，不能重复
- id值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以使用驼峰标识
- 最好不要用标签名作为id值
中划线又叫连字符
注释
/*注释内容*/
HTML和css的编写准则
- 要遵守结构、样式分离原则
设置网页图标
link元素除了可以用来引入css文件，还可以设置网页的图标（href的值是图标链接）
<link rel="icon" type="image/x-icon" href="http://www.jd.com/favicon.ico">
<link rel="icon" href="bg001.png">
link元素的rel属性不能省略，用来指定文档链接资源的关系
一般rel若确定，相应的type 也会默认确定，所以可以省略type
网页图标支持的图片格式是ico、png
常用的css属性
color：前景色（包括文字、装饰线、边框、外轮廓等）
font-size：文字大小
background-color：背景色
width：宽度
height：高度
颜色
有以下几种表示方法
-
基本颜色关键字
- red black yellow blue purple white
-
RGB颜色
-
十进制：rgb(red,green,blue)
-
十六进制：#rrggbb、#rgb
-
#ff0000红色(#f00)，#00ff00绿色，#0000ff蓝色，#000000黑色，#ffffff白色，#ffff00黄色
-
尽量使用#rgb取代#rrggbb，可以缩减css代码的体积，从而减小文件大小，节省用户流量，加快网页响应速度
-
-
-
RGBA颜色：rgba(red、green、blue、alpha)
- alpha 取值范围是0.0~1.0
- 0代表完全透明，1代表完全不透明
- alpha 取值范围是0.0~1.0
-
关键字transparent等价于rgba(0,0,0,0)，完全透明
div{
color:transparent;
}
16进制转10进制
十进制由10个数组成：0~9
十六进制由16个数组成：0~F
所有代码里的标点符号都要用英文的
