华夏棋牌

<!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://mbkdubai.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新凤凰-凤凰pk10预测 捕鱼达人3-捕鱼达人3无限金币免费版 幸运五张-幸运五张规则-掌联幸运五张安卓版 助赢时时彩-韩国时时彩助赢-韩国时时彩助赢计划 安徽福彩网-安徽福彩快3网上购买 pc蛋蛋预测-pc蛋蛋助赢软件 北京pk10开奖-pk10赛车群-pk10开奖首选网上手游 qq捕鱼大亨-千炮捕鱼-qq游戏捕鱼大亨 飞5游戏-飞五游戏官方下载-飞五游戏骗局 888棋牌游戏-盛大娱乐棋牌平台-棋牌电玩城送彩金