颜色设置
#rrggbb 例如：#ff00ff
#rgb 例如：#f0f,等价于#ff00ff
rgb(x,x,x) 例如：rgb(112,112,112) 数值为0-255的整数值
rgb(x%,x%,x%) 例如：rgb(20%,50%,44%) 数值为0-100的整数值
指定URL方式
body {background-image:url(qq.png)};
body {background-image:url(www.baidu.com/qq.png)};
body {background-image:url('qq.png')};
body {background-image:url("qq.png")};
CSS嵌入HTML方式
1、内联（行内）
例如：<p style="color:red; font-size:20px;">内嵌</p>
2、内嵌（内部式）
CSS样式写在<head></head>中间
例如：
<head>
<style type="text/css">
p {color:red; font-size:20px;}
</style>
</head>
<body>
<p>内嵌</p>
</body>```
###3、外部（外联）
>CSS样式写在单独的.css文件中，在HTML中引入.css文件
例如：
- .css文件中写如下内容
`` p {color:red; font-size:20px;}``
- .html文件中<head></head>中引入
``<link rel="stylesheet" type="text/css" href="mystyle.css">``
---
>HTML中CSS的样式优先级：就近原则
---
#CSS选择器（选择符）
###1、HTML选择符
>将HTML标签名作为选择符名
例如：
body {background-color:#ddd}
h1 {color:red}```
2、类选择符(class选择符)
用 . 开头写的样式，通过 class 属性使用，同一标签可以有多个class选择器。
例如：
//设置
h2.css1 {color:red}//有名类选择符
.css2 {color:blue}//匿名类选择符
//使用
<h2 class="css1">h2标签中的css1样式</h2>
<h3 class="css2">h3标签中的css2样式</h3>```
###3、ID选择符
>用 # 开头写的样式，使用 id 属性使用每个标签最多只能有一个ID选择器。
例如：
//设置
id1 {color:yellow; background-image:url(ss.jpg)}
//使用
<h3 id="id1">h3标签使用了id1的ID选择器</h3>
###4、关联选择符
>大样式中的子样式设置，用空格分开。
//设置
ul a {color:red} //ul 中的 a 标签使用这个样式
.css1 a {color:blue} //css1类选择器中的a标签使用这个样式
###5、组合选择符
>用 ，分开，表示声明的标签都是用此样式
//设置
h1,h2,h3 {color:red}
###6、伪元素选择符
>一个标签在不同状态下的设置
//设置
a:link {color:#ff0000; text-decoration:none}//未访问的链接
a:visited {color:#00ff00; text-decoration:none}//已访问
a:hover {color:#ff00ff; text-decoration:underline}//鼠标停留在链接上
a:active {color:#0000ff; text-decoration:underline}//点击链接
* 注：
-a:hover 必须放在a:link a:visited 之后才有效果
-a:active 必须放在a:hover 之后才有效果
#优先级
ID选择器>class类选择器>html选择器>html属性
使用 !important 可以提高优先级
网友评论