CSS筆記

vikingwei

浏览: 38893 次
性别:
来自: 广州

最近访客更多访客>>

wuxiaozeng2440

wd1282988143

songhait

屌丝学Java

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

1.div + CSS (目前流行的開發模式)
a.簡潔,減少大量的<table><tr><td>標簽,減少帶寬;
b.內容和樣工分離,方便維護;
c.符合搜索引擎的喜好;
d.流行大型網站都使用此技術;
e.利于分工合作。
2.HTML設置樣式有三種方法
(1).行內設置樣式(inline)
<body style="background-color: #FF0000">
    Page content.
</body>

(2).嵌入式設置樣式(embedded)
<head>
    <style>
        body {
            background-color: #FF0000;
        }
    </style>
</head>
<body>
    Page content.
</body>


<head>
    <style>
        .redDiv {
            color: #FF0000;
        }
    </style>
</head>
<body>
    <div class="redDiv">First division.</div>
    <div class="redDiv">Second division.</div>
    <div>Third division.</div>
</body>

(3).外部設置樣式(引用外部CSS文件設置,匹配的element元素將生效)
<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    Page content.
</body>

3.CSS選擇器(8種)
(1).標簽選擇器(元素選擇器)
(2).類(class)選擇器
(3).id選擇器
(4).父子選擇器(關聯選擇器)
(5).組合選擇器
(6).偽標簽、偽類選擇器
(7).屬性選擇器
(8).相鄰兄弟選擇器。

/*1.標簽選擇器(元素選擇器)*/
span{
color:blue;
}

/*2.類(class)選擇器*/
.stwo{
color:#383838;
font-weight:bold;
}

/*3.id選擇器*/
#div11{
color:#600000;
}
#p3{
color:red;
border:solid;
border-color:yellow;
}

/*4.父子選擇器(關聯選擇器)*/
#div33 p{
border:solid;
border-color:yellow;
}

/*5.組合選擇器*/
h1,h2{
color:#CCFF66;
}

/*6.偽標簽、偽類選擇器*/
a:link{
color: #CCFF66;
}
a:visited {
color: #CC0033;
}

/*選擇div父標簽下第一個p子標簽*/
div>p:first-child{
border:3px solid red;
}

/*先后順序：行內CSS > id > class > 標簽(父子先) */

/*1.标签选择器*/
body{background-color: #F0F0F0;}
p{margin: 20px 30px 30px 20px;}
/*2.类选择器(.)
语法：.class名称{属性名:属性值;}
设置多个属性：
.class选择器名{
属性名:属性值;
......
}
*/
.news{
background-color: #D0D0D0;
font-size:20px;
color: #FFFF00;
}

/*3.id选择器(#)
语法：#id{属性名:属性值;}
设置多个属性：
#id{
属性名:属性值;
......
}
*/
#one{
background-color: #FFFF00;
font-size:30px;
color:green;
}
/*4.父子(关联)选择器*/
#region_center p{
color:orange;
}
/*5.组合选择器*/
#region_north,#region_south{
background-color:#BDE1F7;
}
/*6.伪选择器
css本身已经定义好样式的选择器.
*/
#letter:first-letter{
color:red;
font-size:30px;
font-weight:bold;
}
/*style > id > class > tag*/

/*擴展：屬性選擇器、兄弟選擇器、父子選擇器*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>attribute value</title>
<style type="text/css">
/*1.屬性選擇器：改變有設置屬性title的color屬性.*/
span[title]{
color:red;
}
span[title=two]{
color:yellow;
}
input[type=reset]{
color:blue;
}
/*屬性值title包含hello的標簽(只要包含hello就OK).*/
p[title*="hello"]{
color:green;
}
/*屬性值title包含word的標簽(word要有空格分開,或等于word,否則選不到).*/
p[title~="word"]{
color:red;
}
/*屬性值title包含的標簽(用-分開,否則選不到).*/
p[title|="word"]{
color:blue;
}
/*屬性值title值以begin開頭.*/
p[title^="begin"]{
color:orange;
}
/*屬性值title值以end結束.*/
p[title$="begin"]{
color:blue;
}

/*2.兄弟選擇器:div標簽緊接在其后的第一個b標簽,中間不能隔其它的標簽*/
div + b{
color:orange;
}
h1 + h2{
border:2px solid green;
color:orange;
}
/*div標簽在其后的所有p標簽*/
div ~ p{
color:red;
}
html > body h1 ~ h3{
color:blue;
}

/*3.父子：div標簽的所有span后裔標簽*/
div span{
color:red;
}

/*div標簽在其后的所有直系i標簽(兒子)*/
div > i{
color:orange;
}
/*偽選擇器:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
:first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，
     就是指所有类型为p的子元素中的第一个。
               这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。
               同样类型的选择器 :last-child和 :last-of-type、:nth-child(n)和 :nth-of-type(n)也可以这样去理解。
   如#child標簽id下的第一個em標簽。
    */
#child>em:first-child{
font-weight:bold;
color:red;
}
</style>
</head>
<body>
<span title="attibute">This is red.</span><br />
<span title="two">span with two in title.</span> <br />
<span title="three">span with "hello" in title.</span> <br />
<span>span four.</span>
<p title="valhello">p with "wei" in title "hello".</p>
<p title="hello">p with "hello" in title.</p>
<div>div + b</div>
<p>div first p.</p>
<b>after b.</b> <br />
<p>div second p.</p>
<div>second div + b</div>
<b>second after b.</b> <br />
<input type="reset" value="Reset" />
<br />
<b>third.</b>
<p title="word-friend">word</p>
<p title="word name">word name</p>
<p title="begin p title">p with "begin" start in title</p>
<p title="end-begin">end-begin.</p>

<p title="valhello">p with "wei" in title "hello".</p>
<p title="hello">p with "hello" in title.</p>

<p title="begin p title">p with "begin" start second in title</p>
<p title="p begin">p with "begin" end in title</p>

<div>
<span>div direct child span.</span> <br />
<i>direct i 兒子</i> <br />
<b>
<i>
<span>b i descendant span.</span><br />
</i>
<i>descendant i 孫子</i>
</b>
</div>

<h1>Title description</h1>
<h2>h2 first description</h2>
<h2>h2 second description</h2>
<h3>h3 three first description</h3>
<h2>h2 second description</h2>
<h3>h3 three second description</h3>
<h3>h3 three third description</h3>

<span id="child">
<em>I am a strong man.</em> <br />
I am a
<em>strong</em> man.
</span>

</body>
</html>

分享到：