CSS笔记

标签：

Hello CSS ：）

结合方式一：
　　<!--html标签上加style属性，属性的值添加CSS代码
　　值得注意的是，所有的标签都有style属性 -->
　　　　例子：
　　　　　　<p style="color:red;"> CSS ONE </p>


结合方式二：
　　<!--使用head范围内的style标签，来设置页面样式，style中填写CSS代码 -->

　　　　例子：
　　　　　　<style type="text/css">
　　　　　　　　p{
　　　　　　　　　　color:red;
　　　　　　　　}
　　　　　　</style>


结合方式三：
　　<!--将外部css文件引入HTML代码中 -->

　　　　新建CSS文件：cssTest.css
　　　　　　p{
　　　　　　　　color:red;
　　　　　　}

　　在HTML代码的head标签范围中写上如下：
　　　　<link rel="stylesheet" type="text/css" href="./cssTest.css">


语法：
　　p{color:red;}

　　　　p代表选择器，表示所有的p标签。后面的大括号里面的内容，表示的是修改代码。

　　选择器：
　　　　1）标签选择器：各种的HTML标签...

　　　　2）id选择器（必须唯一）：
　　　　　　有两个<p>，第一个蓝色，第二个黄色，How？
　　　　　　　　给第一个加id=“one”
　　　　　　　　给第二个加id="two"

　　　　　　css代码：
　　　　　　　　#one{
　　　　　　　　　　color:blue;
　　　　　　　　}
　　　　　　　　#two{
　　　　　　　　　　color:yellow
　　　　　　　　}

　　　　3）class选择器：
　　　　　　<p class="one">Hello</p>
　　　　　　<p>HTML</p>
　　　　　　<a class="one">CSS</a>
　　　　　　<a>SHIT</a>

　　　　　　css代码：
　　　　　　　　.one{
　　　　　　　　　　color:yellow
　　　　　　　　　　}

　　　　4）伪类选择器：
　　　　　　选择标签的某个状态，需要配合其他选择器来使用
　　　　　　　　例子：
　　　　　　　　　　<a href="..."> click me </a>
　　　　　　　　　　这个链接点之前和点之后是不一样的颜色，处于不一样的状态，这个状态指的就是伪类选择器的状态


　　　　　　伪类的状态：
　　　　　　　　l link：未访问过
　　　　　　　　v visited：访问过
　　　　　　　　h hover：悬浮
　　　　　　　　a active：激活 (一般是个瞬时的状态)

　　　　　　css例子：
　　　　　　　　a:link{
　　　　　　　　　　color:green;
　　　　　　　　}
　　　　　　　　a:visited{
　　　　　　　　　　color:black;
　　　　　　　　}
　　　　　　　　a:hover{
　　　　　　　　　　color:blue;
　　　　　　　　}
　　　　　　　　a:active{
　　　　　　　　　　color:pink
　　　　　　　　}

　　　　5）组合选择器...(逗号选择器？)
　　　　　　例子：
　　　　　　　　<a id="one"> click me </a>
　　　　　　　　<p class="two"> click me </p>
　　　　　　　　<font > click me </font>

　　　　　　　　需求：上面的三个标签全部红色。

　　　　　　　　#one,.two,font{
　　　　　　　　　　color:red;
　　　　　　　　　　}

属性：
　　字体属性：
　　　　font-family:黑体;
　　　　font-size:10px;
　　　　font-style:（四种风格...）
　　　　font-weight:(you know...)


　　背景属性：
　　　　background-color:green...
　　　　background-image:url("...");
　　　　background-repeat:repeat/no-repeat/repeat-x/repeat-y
　　　　background-attachment:fixed(固定跟随)

块级标签 =》 占据的范围是一行
div

行内标签 =》 占据的是行内的一部分
span

CSS笔记

标签：

原文地址：http://www.cnblogs.com/AirStark/p/5727808.html