CSS3基本用法
-
CSS3样式
CSS3代码由样式表、样式、选择器和声明组成。
选择符：指定样式作用的对象，可以是标签名、类名或ID。
声明：指定渲染对象，包括属性和属性值。使用分号结束一个声明，一个样式中最后一个声明可以省略分号。所有声明包含在一堆大括号内，位于选择器的后面。
属性：设置样式的具体效果项。
属性值：定义显示效果的值，包括数值、单位、或者关键字。 -
CSS3样式表
由一个或者多个CSS3的样式组成，分成内部样式表和外部样式表。
可以使用<link>标签导入，或者@import关键字导入。 -
CSS3代码注释和格式化
增加注释/* */ -
CSS继承性
是指在HTML的结构中，后代元素继承祖先元素的样式。 -
CSS层叠性
是指可以为同一个对象应用多个样式。多个样式作用同一个对象时，会根据 选择器的权重来确定优先级。
CSS3选择器
- 标签选择器，是根据HTML标签名匹配同类的所有标签.
在<head>标签内添加<style type="text/css">,并在<style>标签中输入
p{font-size:24px;
color:#f00}
- 类选择器，以点号
.为前缀，后面为类名。在标签中定义class属性，设置属性值为类选择器的名称。当应用多个样式时，类名之间通过空格进行分隔，效果不受前后顺序的影响。
在<head>标签内添加<style type="text/css">,并在<style>标签中输入
.red{color:#f00}
.underlin{text-decoration:underlin;}
<!-- 类选择器 -->
<acticle>
<h1>游子吟</h1>
<p class="underline">慈母手中线，游子身上衣。</p>
<p class="red underline">临行密密缝，意恐迟迟归。</p>
</acticle>
- ID选择器，以井号
#为前缀，后面为ID名称。
在<acticle>标签设置id="tangshi"
在<head>标签内添加<style type="text/css">,并在<style>标签中输入
#tangshi{
width:300px;
border:solid 2px red;
margin:auto;
text-align:center;
}
- 包含选择器，通过空格链接两个选择器，前面选择器表示包含的祖先元素，后面选择器表示被包含的后代元素。
在<head>标签内添加<style type="text/css">,并在<style>标签中输入
header h1{font-size:18px;}
footer h1{font-size:12px;}
<body>
<header>
<h1>石家庄铁道大学</h1>
</header>
<footer>
<h1>@石家庄铁道大学</h1>
</footer>
</body>
- 子选择器，使用尖角号
>连接两个选择器，前面选择器表示要匹配的父元素，后面选择器表示被包含的匹配子对象。
<style type="text/css" >
article p{font-size:14px;color:#666}
article>p {font-size:20px;color:#000}
</style>
<article>
<p>慈母手中线，游子身上衣。</p>
<section>
<p>慈母用手中的线，为远行的儿女赶制衣服。</p>
</section>
</article>
- 相邻选择器，使用加号
+连接两个选择器，前面选择器匹配特定元素，后面选择器根据结构关系指定同级、临近的匹配元素。
<style type="text/css" >
article p{font-size:14px;color:#666;}
h1+p{font-size:20px;color:#000;}
</style>
<article>
<h1>游子吟</h1>
<p>慈母手中线，游子身上衣。</p>
<p>慈母用手中的线，为远行的儿女赶制衣服。</p>
</article>
- 兄弟选择器，使用
~连接两个选择器，前面选择器匹配特定元素，后面选择器根据结构关系，指定其后同级所有匹配的元素。
<style type="text/css" >
article p{font-size:14px;color:#666;}
h1~p{font-size:20px;color:#000;}
</style>
扫一扫
502
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
