网页基础--CSS(用H5将今天的笔记整理成网页形式）
2018-08-14 本文已影响129人
GHope
CSS基础
基本功能：目录跳转、代码查看、结构化知识点
参看资料:http://www.w3school.com.cn/cssref/css_selectors.asp
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<link rel="stylesheet" type="text/css" href="css/hw.css"/>
</head>
<body>
<div id="" align="center">
<a href="#一、初识CSS"><h1>一、初识CSS</h1></a>
<a href="#简介css"><h3>简介css</h3></a>
<a href="#定位css"><h3>定位css</h3></a>
<a href="#书写css"><h3>书写css</h3></a>
<a href="#基本属性补充"><h3>基本属性补充</h3></a>
<a href="#二、CSS选择器"><h1>二、CSS选择器</h1></a>
<a href="#元素选择器"><h3>元素选择器</h3></a>
<a href="#id选择器"><h3>id选择器</h3></a>
<a href="#class选择器"><h3>class选择器</h3></a>
<a href="#统配符"><h3>统配符</h3></a>
<a href="#层级选择器css"><h3>层级选择器css</h3></a>
<a href="#群组选择器"><h3>群组选择器</h3></a>
<a href="#颜色属性补充"><h3>颜色属性补充</h3></a>
<a href="#三、伪类选择器"><h1>三、伪类选择器</h1></a>
<a href="#link"><h3>link</h3></a>
<a href="#visited"><h3>visited</h3></a>
<a href="#hover"><h3>hover</h3></a>
<a href="#active"><h3>active</h3></a>
<a href="#Love Hate"><h3>Love Hate</h3></a>
</div>
<hr />
<a name="一、初识CSS"><h1>一、初识CSS</h1></a>
<a name="简介css"><h3>简介css</h3></a>
<p>
1、什么是CSS<br />
CSS是web标准中的表现标准，用设置网页上的标签的样式（长什么样，在哪）<br />
CSS代码/文件，我们叫样式表<br />
目前我们使用的是CSS3<br />
</p>
<a name="定位css"></a><h3>定位css</h3></a>
<p>
2、写在哪 <br />
内联样式表：将CSS代码写在标签的style属性中<br />
内部样式表：写在head标签中的style标签的内容<br />
外部样式表：写在一个css文件中，通过heard中的link标签来关联<br />
优先级：内联>内部=外部（内外无绝对，参照位置顺序）<br />
</p>
<a name="书写css"></a><h3>书写css</h3></a>
<p>
3、怎么写<br />
选择器（属性：属性值；属性：属性值）<br />
选择器： 用来选中需要设置样式的标签<br />
属性：css属性（CSS2中大约有两百多个）<br />
属性值：如果属性值是数字，表示的是大小要在后面加px<br />
</p>
<a name="基本属性补充"></a><h3>基本属性补充</h3></a>
<p>
补充属性：color -- 设置字体颜色，background-color -- 设置背景颜色，width -- 宽，height -- 高
</p>
<xmp>
<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>
</xmp>
<hr />
<a name="二、CSS选择器"><h1>二、CSS选择器</h1></a>
<a name="元素选择器"><h3>元素选择器</h3></a>
元素选择器（标签选择器）：标签名 <br />
选中所有的标签名对应的标签
<a name="id选择器"><h3>id选择器</h3></a>
id选择器：#id属性值<br />
每个标签都有一个id属性，整个html中，id的值必须唯一
<a name="class选择器"><h3>class选择器</h3></a>
class选择器：.class属性值<br />
每个标签都有一个class属性
<a name="统配符"><h3>统配符</h3></a>
通配符：*<br />
选中所有的标签
<a name="层级选择器css"><h3>层级选择器css</h3></a>
层级选择器：选择器1 选择器2 ...
<a name="群组选择器"><h3>群组选择器</h3></a>
群组选择器：选择器1，选择器...
<a name="颜色属性补充"><h3>颜色属性补充</h3></a>
补充：<br />
css中的颜色值：<br />
1、颜色英语单词<br />
2、十六进制颜色<br />
3、rgb值：rgb(红，绿，蓝)rgba(红，绿，蓝,透明度) - 透明度 0-1
<xmp>
<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>
</xmp>
<hr />
<a name="三、伪类选择器"><h1>三、伪类选择器</h1></a>
伪类选择器 ---- 选择器：状态
<a name="link"><h3>link</h3></a>
link:超链接的初始状态 -- 一次都没有访问成功的时候的状态
<a name="visited"><h3>visited</h3></a>
visited：超链接访问后的状态 -- 已经访问成功之后的状态
<a name="hover"><h3>hover</h3></a>
hover:鼠标悬停在标签上对应的状态
<a name="active"><h3>active</h3></a>
active:鼠标按住的状态
<a name="Love Hate"><h3>Love Hate</h3></a>
给同一个标签通过伪装类选择器给不同状态设置不同的样式的时候，要遵守爱恨原则
<xmp>
<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>
</xmp>
</body>
</html>
首页展示
