让网页更加美丽（css入门）
Posted 韶光不负
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了让网页更加美丽（css入门）相关的知识，希望对你有一定的参考价值。
为了让我们的网页更加漂亮，也是学习前端必须的内容所以学习css选择器是必须的，下面废话不多说让我们学习起来。
目录
css3新增加的选择器(在css3中添加，小编就是简单说几个）
什么是css?
沉叠样式表：html中诞生的技术，用来修饰HTML网页。
css常见的三种写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页</title>
<style >
div{
color: aqua;
}
</style>
<link rel="stylesheet" type="text/css" href="css/text.css"/>
</head>
<body>
<div style="color: #0000FF;">第一种写法</div>
<div >第二种写法</div>
<div class="color" >第三种写法</div>
</body>
</html>
第三种方法下css部分（在开发中，这种方式是常见的方式）
.color{
color: #FF0000;
}现象：
常见的css属性
| width | 宽 |
| height | 高 |
| font-size | 字体大小 |
| border (线的大小 线的类型 线的颜色) | 边线 |
css中颜色表示方法
第一种
color: red;
color: 颜色单词;第二种：
color: (#ff,#ff,#ff)
/* rgb按照三源色比例进行配置，按照16进制书写 */第三种：
color: rgb(255,255,255)
/* rgb按照三源色比例进行 */第四种：
color: rgba(255,255,255,0.3)
/* rgb按照三源色比例进行,a表示透明度，范围0~1 */css选择器
什么是css选择器？
方便开发找到和修改渲染标签的方式
css选择器
基本选择器
| id选择器（在网页中表示唯一，不建议使用数子开头） | #标签名称 |
| 类选择器（表示就是‘.’，clsss选择器) | .标签名称 |
| 标签选择器 | 标签名称 |
| 通配符选择器 | *（代表通配符，代表任意） |
包含选择器
| 子代选择器（如：div下的p标签） | div>p |
| 后代选择器(如：div下所有的p标签,以空格表示） | div p |
复合选择器
| 用逗号隔开 | 可以多个选择器公用一个标签 |
| 范围选择器 | 对范围选择器进行渲染 |
写法示例
#fixed-input{
color: red;
}
.color{
color: rgba(255,255,255,0.3)
/* rgb按照三源色比例进行,a表示透明度，范围0~1 */
}
div{
width: auto;
}
*{
margin: 0px;
/* 外边距 设置为0，清除外边距 行内标签默认都有 */
padding: 0px;
/* 内边距 */
border: 1px solid red;
}
/* 子代选择器 */
header>.top {
height: 37px;
width: 100%;
background-color: #1D011B;
}
/* 后代选择器 */
header top{
height: 37px;
width: 100%;
background-color: #1D011B;
}
/* 复合选择器 */
header .top{
height: 37px;
width: 100%;
background-color: #1D011B;
}css优先级排序
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
属性选择器
| div[text] | div中的text标签 |
| input[type$='i'] | 以i结尾 |
| input[type^='i'] | 以i开头 |
| input[type*='e'] | 通配有e |
示例
/* input标签中text=haha值的标签 */
input[text='haha']{
color: #0000FF;
}
/* input标签中有e字母的标签 */
input[type*='e']{
color: #000000;
}
/* input标签中有e字母开头的标签 */
input[type^='i']{
color: #0000FF;
}
/* input标签中有e字母结尾的标签 */
input[type$='i']{
color: #721170;
}css3新增加的选择器(在css3中添加，小编就是简单说几个）
（学习地址：CSS 参考手册 (w3school.com.cn)）
| :root | 选择文档的根元素。 |
| element+element | 标签1同一个级别下的下一个标签2 |
| :first-child | 选择属于父元素的第一个子元素的每个 <p> 元素。 |
/* 没有点击的效果 */
a:link{
color: #000000;
/* 设置没有下划线 */
text-decoration: none;
}
/* 被点击后效果 */
a:visited{
color: #721170;
}
/* 鼠标放上去的效果 */
a:hover{
color: #721170;
}
/* 被点击效果 */
a:active{
color: #0000FF;
}
以上是关于让网页更加美丽（css入门）的主要内容，如果未能解决你的问题，请参考以下文章