CSS
一. 三原色
在网页中我们可以直接书写颜色的名字,但是却记不了这么多的单词。可以使用 RGB(red green blue)三原色来表示颜色,书写形式为:
#ff00ff;
注意: 必须以#开头,后面紧跟着为6个16进制数,前两位为红色,中间两位为绿色,最后两位为blue.
#ff0000; 红色
#00ff00; 绿色
#0000ff; 蓝色
#ffffff; 白色
#000000; 黑色
二. 字体样式
<span style="color:red; font-size: 34px;">字体</span>
三. 样式选择器
3.1 标签选择器(重要)
<style>
/** 让所有的div使用同一中样式 */
div {
width: 100px;
height: 100px;
background-color: red;
}
</style>
3.2 id选择器(不重要)
<style>
/** 将id为box1的盒子应用以下样式 */
#box1 {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
在实际的工作中,定义样式采用class, 使用js的使用id.
3.3 类选择器(非常重要)
<style>
/** 将id为box1的盒子应用以下样式 */
.box1 {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box1"></div>
</body>
为什么使用类选择器:
1. 为了样式可重用性。
2. 为了代码的可维护性。
3.4 通配符选择器
* {
margin: 0;
padding: 0;
}
在实际工作只用这一种用法。
3.5 后代选择器(非常重要)
.box1 li{ /** 中间必须是空格,表示class为box1, 所有的后代li都应用以下样式 */
color: green;
}
<body>
<!-- 如下的三个案例都会应用上如上的样式 -->
<div class="box1">
<ul>
<li>用户</li>
<li>系统</li>
<li>菜案</li>
</ul>
</div>
<ul class="box1">
<li>用户</li>
<li>系统</li>
<li>菜案</li>
</ul>
<div class="box1">
<div>
<div>
<ul>
<li>电脑</li>
<li>手机</li>
<li>计生用品</li>
</ul>
</div>
</div>
</div>
</body>
3.6 子选择器(用的较少)
<style>
/**
.box1的直接的儿子p, 变为红色
*/
.box1>p {
color: red;
}
</style>
</head>
<body>
<!-- 会应用如上定义的样式 -->
<div class="box1">
<p>文字</p>
<p>系统</p>
<p>菜案</p>
</div>
<!-- 不会应用如上定义的样式 -->
<div class="box1">
<div>
<p>文字1</p>
<p>系统1</p>
<p>菜案1</p>
</div>
</div>
</body>
3.7 交集选择器(用的很少)
<head>
<style>
/**
p.red 意思是即是p标签,class又为red
*/
p.red{
color: red;
}
</style>
</head>
<body>
<!-- 如下的三个盒子会应用如上定义的样式 -->
<p class="red">红色</p>
<p class="red">红色</p>
<p class="red">红色</p>
<!-- 如下的两个盒子不会应用如上定义的样式 -->
<p>绿色</p>
<p>绿色</p>
</body>
3.8 并集选择器(非常重要)
<style>
/** 所有p标签,span标签,含有class="red"下的所有的li标签 */
p, span, .red li{
color: red;
}
/*p {
color: red;
} */
/*span {
color: red;
}*/
/*.red li {
color: red;
}*/
</style>
</head>
<body>
<p>red</p>
<p>red</p>
<!-- .red li {} -->
<div class="red">
<span>文字</span>
<ul>
<li>电脑</li>
<li>手机</li>
</ul>
</div>
<div>green</div>
<span>red</span>
<span>red</span>
</body>
3.9 链接伪类选择器(非常重要)
爱恨法则(love hate)
lv包包,hao
a {
text-decoration: none; /** 去掉a标签的下划线 */
}
/* 是连接正常情况情况下的样式 */
a:link {
color: orange;
}
/* 访问过之后所呈现的颜色 */
a:visited {
color: red;
}
/* 鼠标停留在a标签上的样色 */
a:hover {
color: green;
}
/* 当鼠标按下的时候,但是没有松手的时候呈现的样式 */
a:active {
color: darkblue;
}
A. a标签中不要嵌套a标签。
B. a标签中虽然可以放块级元素,但是在实际的工作中,我们需要将其转换为块级元素。
C. 在实际的工作总,a标签用的最多只有hover.
3.10 css3高级选择器
<style>
/** ul下的第一个li标签 */
/**
ul > li:first-child {
color: #41A0BF;
}
*/
/** ul下的第一个li标签 */
ul > li:nth-child(1) {
color: deeppink;
}
/** ul下的第二个li标签 */
ul > li:nth-child(2) {
color: green;
}
/** ul下的第三个li标签 */
ul > li:nth-child(3) {
color: purple;
}
/** ul下的第四个li标签 */
ul > li:last-child {
color: red;
}
</style>
<body>
<ul>
<li>电脑</li>
<li>手机</li>
<li>计生用品</li>
<li>日用品</li>
</ul>
</body>