css的基本样式
CSS 规则由两个主要的部分构成:
选择器
,以及
一条或多条声明
。
selector {declaration1; declaration2; ... declarationN }
选择器
通常是您需要改变样式的 HTML 元素。
属性
是您希望设置的样式属性。每个属性有一个值。属性和值被冒号分开。
<style>
#change{
color: blueviolet;
}
</style>
标签选择器
作用与当前页面所有的li标签
<style>
li{
color: #fc83ff;
font-size: 25px;
font-family: "Angsana New";
}
</style>
<ul>
<li>理学院</li>
<li>计算机学院</li>
<li>外国语学院</li>
<li>汽车学院</li>
<li>机械学院</li>
<li>管理学院</li>
<li>通信学院</li>
</ul>
<ul>
<li>工学院</li>
<li>计算机学院</li>
<li>外国语学院</li>
<li>法学院</li>
<li>数学院</li>
<li>管理学院</li>
<li>国防生学院</li>
</ul>
ID选择器
给当前页面指定的id元素添加样式
一个页面可以有多个id选择器,但只能有名字相同的一个id
<style>
#change{
color: blueviolet;
font-family: AngsanaUPC;
}
</style>
<ul>
<li
id="change">理学院</li>
<li>计算机学院</li>
<li>外国语学院</li>
<li>汽车学院</li>
<li>机械学院</li>
<li>管理学院</li>
<li>通信学院</li>
</ul>
类选择器
给当前页面某一类标签添加样式
同一个页面,可以存在多个同名的类
<style>
.change{
color: red;
}
</style>
<ul>
<li
class="change">理学院</li>
<li>计算机学院</li>
<li
class="change">外国语学院</li>
<li>汽车学院</li>
<li
class="change">机械学院</li>
<li>管理学院</li>
<li
class="change">通信学院</li>
</ul>
后代选择器
一种多个用空格分隔的选择器
后代选择器可以选择作为某元素后代的元素
<style>
li{
color: yellow;
}
#second li{
color: red;
}
</style>
<!--
后代选择器-->
<ul id="first">
<li>烟台大学</li>
<li> 鲁东大学</li>
<li>山东工商学院</li>
</ul>
<ul
id="second">
<
li>青岛理工大学</li>
<li>山东科技大学</li>
<li>中国石油大学</li>
</ul>
<ul id="third">
<li>青岛理工大学2</li>
<li>山东科技大学2</li>
<li>中国石油大学2</li>
</ul>
子代选择器
与后代选择器相比,
子元素选择器只能选择某元素子元素的元素。
<style>
/*
子代选择器*/
h1
>
strong{
color: red;
}
h1 strong{
color: red;
}
</style>
<
h1>This is <
strong>very</strong> <
strong>very</strong>important. <br>
This is <em>really<strong>very</strong></em> important.
</h1>
相邻选择器
可选择紧接在另一元素后的元素,且二者有相同父元素。
<style>
h1
+
p{
color: red;
}
</style>
<
h1>bjkllkjalkaljgla</h1>
<
p>dfmfgsaaf</p>
<p>FDSFNDSFH</p>
<p>ahfHSBFDH</p>
<p>bsdhsassh</p>
<p>bssahabas</p>
<p>jjkavajkd</p>
伪类选择器
用于向某些选择器添加特殊的效果,
其样式是【:nth-child()或:hover】
<style>
/*
伪类选择器*/
/*
让第2n行变色*/
li
:nth-child(2n){
color: red;
}
/*
只让第1行变色*/
li
:first-child{
color: red;
}
/*
只让最后一行变色*/
li
:last-child{
color:blue;
}
/*
hover:悬浮 实现当鼠标放在哪一行时,哪一行变色*/
li:hover{
color: red
}
li:nth-child(2n):hover{
color: red;
}
li:nth-child(2n-1):hover{
color: blue;
}
</style>
<ul>
<li>烟台大学</li>
<li>山东工商学院</li>
<li>鲁东大学</li>
<li>青岛大学</li>
<li>山东科技大学</li>
<li>青岛理工大学</li>
</ul>
通配符选择器
通配符使用
星号*
表示,意思是“所有的”。
<style>
/*
通配符选择器*/
/*
消除所有元素的内外边距*/
*{
padding: 0;
margin: 0;
}
#div1{
height: 200px;
background-color: #42668F;
margin-left: 20px;
}
/*
消除列表的圆点*/
li{
list-style: none;
}
</style>
<div id="div1">
<ul>
<li>hhla</li>
<li>sgas</li>
<li>vdgs</li>
</ul>
</div>