<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<pre>

标签四个通用属性是:id,class,title style

id:相等于网页元素***号,用来唯一标识网页元素

class:相等于标签的类属性,用于元素分类

title:相等于元素简介,如元素的用途

style:是用来描述元素的宽度,高度,颜色,轮廓等


css中样式由二部分组成:选择符和声明块

声明块中的每一条语句就是一个样式声明,由属性名与对应的值构成。元素是通过标签来包装,用属性来描述,因其,可以通过标签和标签中的属性来选择元素


用属性选择元素可以用id,class,title等

例:

img{

border-radius:50%;  设置图形轮廓

border:2px solid red;  设置图像边框

}



选择符是根据元素特征来定位,因此元素标签与属性以及位置都可以当做选择符来使用

选择符:

1.标签选择符(常用)

例:p{text-align:center;}  段落文本居中(用标签名称表示,用来描述网页元素类型的通常与其他选择符使用,返回一组元素)



2.id选择符

例:#header{backgroud-color:#ccc;}    设置背景为灰色(id选择符用#表示,用来选择网页中用id属性声明的元素,只返回一个元素)



3.类选择符

例:.blue{color:blue;}  设置元素文本颜色为蓝色(类选择符用英文的点"."来表示 用来选择使用了class属性声明的元素,通常返回一组相关元素)



4.属性选择符

例:[title="http://1st-birthday-party-ideas.com"]{font-size:20px;}  将具有改属性的元素文本大小设置为20像素  (除class和style以外的属性,都可以。属性放在一对方括号中[]可同时指定多个属性还可以对属性值进行正则查询)



5.群组选择符

h1,h2,h3,h4,h5,h6{font-weight:lighter;}  去掉标题元素的加粗样式 (可以设置多个元素共用样式,用逗号隔开每个选择符)



6.后代选择符

例:section h1{color:red;} 将section元素下面所有h1元素文本设置为红色  (根据元素之间di属关系来选择,多个选择符之间,用空格分隔)



7.子代选择符

例:div>h1{color:green;} 将div 元素下面子级h1元素文本设置为绿色  (子代选择符,只选择当前元素直接子元素,用>号表示 子代选择符,非常的复杂,里面应用了大量的伪类元素,是我们学习的重点!!!)



8.伪类选择符

例:visited{color:gray;} 将访问过的链接文本颜色设置为灰色  (伪类主要应用在特定标签上,表示当前的元素的状态,例如标签的4种状态;未访问,已访问,鼠标悬停,点击中等)



9.伪元素

例:first-letter:设置段落首行的首字母样式

first-line:设置段落首行文本的样式

(设置段落首字母下沉效果,或者首行的显示效果  比较合适英文,中文应用不多)



10.通用与同辈选择符(不常用)

例:*{font-size:12px;}  设置网页中文本均为12像素

p + a {color:pink;}  设置p和相邻a标签文本为粉色

通用选择符星号"*"与同辈选择符加号"+"

通用选择符:一次性设置所有标签的统一样式,不仅效率低,而且影响了样式继承

同辈选择符:我们通常用其他更加高效的选择符代替它



样式写在哪里呢?

1.写在元素标签的style属性中。(仅对当前元素有效)

2.写在当前页面头部的style标签中。(仅对当前页面所有元素有效)

3.写在独立的css文件中。(对所有引用该文件的页面均有效)

css文件引入方式:<link rel="stylesheet" href="style.css">



(1).在实际生活中,标签选择符很少单独使用,通常与其他类型选择符组合在一起以达到精准定位元素的目的。

用标签来选择网页元素是最直观的方法!!!(基本格式:标签名 空格 { 属性名 冒号:属性值; }  )



(2).用id选择符选择的元素,必须在当前页面中,是唯一的(id 选择符,通常用来设置网页中的唯一元素如网页头部,底部或者侧边栏等大多与布局元素配对使用)   (页面仅有唯一一个id选择符!!!!!!)

例:

#green{

color:green;

}

<h1 id="green">永久免费</h1>



(3).如果网页上有多个具有相同样式的元素就使用类选择符,不仅高效,而且灵活,类选择符是我们工作中使用最多的一种选择符(多多练习!!)

例:.circle {

border-radius:50%;  设置边框样式为圆形

opacity:0.5;  设置透明度为0.5

}

<img src="images/vfj.jpg" width="120" alt="">


(4).css的属性选择符中,属性名是放在一对方括号"[]"中的例如:[title]

如果要使用多个属性时,可以连续写多个,另外还可以指定属性具体的值,来更精确的选择元素,甚至可以用正则,来进行范围匹配

例:

/*css文件*/

[alt] {border-radius:50%; border: 50px solid red;}

[alt="小魔女"] {border: 5px solid blue;}

[alt] [title] {border: 5px solid green;}

[alt^="china"] {border: 5px solid pink;}

[alt$="heyzo"] {border: 5px solid purple;}

[alt~="php"] {border: 5px solid yellow;}

[alt|="tokyo"] {border: 5px solid tomato;}



<link rel="stylesheet" type="text/css" href="style.css">


<img src="images/xdb.jpg" width="110" alt="小魔女">

<img src="images/xdb.jpg" width="110" alt=" " title="">

<img src="images/xdb.jpg" width="110" alt="china hefei">

<img src="images/xdb.jpg" width="110" alt="japan heyzo">

<img src="images/xdb.jpg" width="110" alt="php mysql">

<img src="images/xdb.jpg" width="110" alt="tokyo-hot">


方法:

[属性名^=属性值]:指定起始字符

[属性名$=属性值]:指定结束字符

[属性名|=属性值]:以该值开头并以空格分隔

[属性名~=属性值]:以该值开头并以'-'分隔

属性选择符,提供了一个更加强大的选择元素的方法



(5).群组选择符,从字面意义上看,就是一次性的选择多个元素统一进行样式设置,每个选择符之间用逗号分隔,然后把共用样式写到声明块中即可

例:

h1,p {

font-size:40px;

color:#f69;

}


<h1>php</h1>

<p>你好呀</p>



(6).后代选择器 :第一个选择符是起始点,用空格与后面的选择符分隔开 可以找到所有符合条件的元素包括儿子级,孙子级

例:

父选择符 后代选择符

div p img {

border: 2px solid #F00;

}




例:

h1 span {

font-size:16px;

color:blue;

}

ol li img {

width: 60px;

}

ol li {

font-size:20px;

color:red;

}


<h1>php<span>中文网</span></h1>

<div>

<h3>电影</h3>

<ol>

<li><img src="images/xdb.jpg" width="110" alt="">xcsd</li>

<li><img src="images/xdb.jpg" width="110" alt="">cdf</li>

<li><img src="images/xdb.jpg" width="110" alt="">cdw</li>

</ol>

</div>




(7).子代选择符:仅选择直接子元素。子代选择符还支持伪类

例:

div>a {     

color: red;

}

li:first-child {color: red;}  设置li第一行为红色

li:last-child {color:red;}  设置最后面一行为红色

li:nth-child(5) {color:red;}  设置第五行为红色

li:nth-child(even) {color:red;}  设置偶数行文本成红色

li:nth-child(odd) {color:red;}  设置基数行文本成红色


<ol>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

<li>7</li>

<li>8</li>

</ol>



(8).通用选择符:通用选择符是用一个" * "号,一次性将页面上所有的元素设置成指定的样式  ,经常用来重置页面所有的默认样式。(谨慎使用!!!)

例:

/*元素默认样式全部被自定义样式所替代*/

* {         

font-size: 16px;

color: tomato;

margin:0;

padding: 0;

}


/*同级且相邻的关系 (仅设置一个h2元素而另一个标题没有发生变化)*/

h1+h2 {

color: red;

}


/*同级不相邻的关系  (设置了另外一个元素为红色了)*/

h1~h2 {

color: red;

}


/*同辈选择符又叫兄弟选择符*/





样式层叠的问题(对于同一个元素,将不同的样式,层层叠加上去,这就是层叠样式表css名称的由来)

标签样式的来源:

1.浏览器默认样式

2.用户自定义样式(重点!!!)


样式层叠的问题,是通过样式声明的位置,以及涉及的对象来设置样式不同的优先级来解决的


类样式的优先级明显高于标签样式




标签样式:将包装元素的标签样式重新定义,如果标签样式修改了,那么标签的元素样式自然也被修改

例:

/*标签样式直接修改默认样式*/

h2 {

font-size: 3em;   设置自定义样式,使得浏览器默认的值被修改

color: red;

}




类样式:如果要将页面上某些元素设置成统一的外观就使用类样式(类样式,仅仅做为标签class属性的值存在,因此,类样式可以应用到更多的标签上甚至其他页面都可以引用,所以更加通用)

例:

/*维护时想修改某一些代码时会产生代码冗余,利用类样式这样做就不会了*/

.heagline {

font-size: 1.5em;

font-weight: bold;

color: green;

}

.red {

color: red;

}


/*同一个class可以写多个类名以" " 空格隔开,不用写太多代码,使得代码简洁*/

<p class="heagline red">类样式的优先级明显高于标签样式</p>




id样式:具有id属性的元素,在当前页面中,应该是唯一的,所以通过id属性添加到元素的样式,(优先级要大于类元素!!!)用的并不多,但有的时候非他不可

例:

/*这里样式会变成红色,因为id的级别比其他的都要高,它会覆盖掉标签样式和类样式*/

h2 {

color: green;

}

.blue {

color: blue;

}

#red {

color: red;

}

<h2 id="red">优先级要大于类元素!!!</h2>





行内样式:是通过标签属性style,进行设置,其样式仅适用当前元素。类样式和id样式,也是通过标签属性来调用,但是他们的样式代码是写在标签外面的,可以被多个标签调用,所以行内样式的作用范围最小,级别也是最高

例:

img {

border: 15px solid green;  设置边框为绿色

}

.blue {

border: 15px solid blue;

}

#red {

border: 15px solid red;

}

/*在img标签中,添加style属性 在它的属性值中写入样式声明*/

<img id="red" 

style="border: 15px solid yellow;" 

src="timg.peg" width="300" alt="">



行内样式的优先级大于id样式,大于类样式,大于标签样式!!











</pre>

</body>

</html>



0/300
全部评价
pk10开奖记录 极速赛车 北京pk10开奖直播 北京赛车开奖直播