CSS基础
基本功能：目录跳转、代码查看、结构化知识点
参看资料:http://www.w3school.com.cn/cssref/css_selectors.asp
CSS
一、初识CSS
简介css
定位css
书写css
基本属性补充
二、CSS选择器
元素选择器
id选择器
class选择器
统配符
层级选择器css
群组选择器
颜色属性补充
三、伪类选择器
link
visited
hover
active
Love Hate
一、初识CSS
简介css
1、什么是CSS
CSS是web标准中的表现标准，用设置网页上的标签的样式（长什么样，在哪）
CSS代码/文件，我们叫样式表
目前我们使用的是CSS3
定位css
2、写在哪
内联样式表：将CSS代码写在标签的style属性中
内部样式表：写在head标签中的style标签的内容
外部样式表：写在一个css文件中，通过heard中的link标签来关联
优先级：内联>内部=外部（内外无绝对，参照位置顺序）
书写css
3、怎么写
选择器（属性：属性值；属性：属性值）
选择器： 用来选中需要设置样式的标签
属性：css属性（CSS2中大约有两百多个）
属性值：如果属性值是数字，表示的是大小要在后面加px
基本属性补充
补充属性：color -- 设置字体颜色，background-color -- 设置背景颜色，width -- 宽，height -- 高
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--关联外部样式表-->
<link rel="stylesheet" type="text/css" href="css/初识CSS.css"/>
<!--style标签
专门用来设置样式的标签
-->
<style type="text/css">
div{
background-color: yellowgreen;
}
</style>
</head>
<body>
<div style="color:aquamarine;">
我是div
</div>
</body>
</html>
二、CSS选择器
元素选择器
元素选择器（标签选择器）：标签名
选中所有的标签名对应的标签
id选择器
id选择器：#id属性值
每个标签都有一个id属性，整个html中，id的值必须唯一
class选择器
class选择器：.class属性值
每个标签都有一个class属性
统配符
通配符：*
选中所有的标签
层级选择器css
层级选择器：选择器1 选择器2 ...
群组选择器
群组选择器：选择器1，选择器...
颜色属性补充
补充：
css中的颜色值：
1、颜色英语单词
2、十六进制颜色
3、rgb值：rgb(红，绿，蓝)rgba(红，绿，蓝,透明度) - 透明度 0-1
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*通配符*/
*{
font-size: 50px;
}
/*class选择器*/
.c1{
color: beige;
background-color: olive;
}
/*元素选择器*/
a{
background-color: yellow;
}
/*id选择器*/
#a1{
color: #ff0000;
}
/*层级选择器*/
#all_a a{
color: pink;
}
div div a{
text-decoration: none;
}
/*群组选择器*/
/*同时选中所有的h1标签和所有的span标签*/
h1,span{
background-color: pink;
}
</style>
</head>
<body>
<h1>我是h1</h1>
<span id="">
我是span
</span>
<div id="">
<a href="">000</a>
<p></p>
</div>
<div id="all_a">
<a href="">111</a>
<a href="">222</a>
<a href="">333</a>
<a href="">444</a>
<a href="">555</a>
</div>
<a id="a1" href="" >我是a</a>
<a id="a2" href="" >我是a2</a>
<p class="c1">ppp</p>
<div id="" class="c1">
我是div
</div>
</body>
</html>
三、伪类选择器
伪类选择器 ---- 选择器：状态
link
link:超链接的初始状态 -- 一次都没有访问成功的时候的状态
visited
visited：超链接访问后的状态 -- 已经访问成功之后的状态
hover
hover:鼠标悬停在标签上对应的状态
active
active:鼠标按住的状态
Love Hate
给同一个标签通过伪装类选择器给不同状态设置不同的样式的时候，要遵守爱恨原则
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*同时设置a标签的所有状态*/
a{
color: skyblue;
}
a:link{
color: green;
}
a:visited{
color: pink;
}
a:hover{
color: red;
font-size: 40px;
}
a:active{
color: yellow;
}
#d1{
width: 100px;
height: 50px;
background-color: darkgreen;
}
#d1:hover{
background-color: greenyellow;
}
</style>
</head>
<body>
<a href="http://www.baidu.com/">百度一下</a>
<div id="d1" >
</div>
</body>
</html>
首页展示