静态资源Css基础语法

1.css的引入方式

<1>内联样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>引入方式1</title>
</head>
<body><!--内联样式--><h1 style="color: red; font-size: 20px">Hello World</h1><h1>CSS</h1>
</body>
</html>

<2>内部样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>引入方式2</title><!--内部样式--><style>div{color: red;font-size: 20px;}</style>
</head>
<body><div>div1</div><div>div2</div>
</body>
</html>

<3>外部样式【多个网页需要使用相同的样式时，推荐使用这种方式】

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>外部样式[引入]</title>
<!--    rel是关联的意思，关联的是一个样式表(stylesheet)--><link rel="stylesheet" href="../css/2.css">
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

2.注释

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*为div标签添加样式*/div {/*color: red;*/}</style>
</head>
<body>
<!--div标签-->
<div>div</div>
</body>
</html>

3.基本选择器

【包含全局选择器、元素选择器、类选择器、id选择器等】

<html lang="en">
<head><meta charset="UTF-8"><title>基本选择器</title><style>/*全局选择器【常用于去外边距】*//** {*//*    background-color: aquamarine;*//*    margin:0;*//*    padding:0;*//*}*//*元素选择器*/div {color: red;}/*类选择器*/.cls {/*margin: 0;*/color: blue;}/*id选择器*/#d4 {color: green;}#d5 {color: pink;}</style>
</head>
<body>
<div>div1</div><div class="cls">div2</div>
<div class="cls">div3</div>
<h5 class="cls">aaa</h5><div id="d4">div4</div>
<div id="d5">div5</div>
</body>
</html>

7.属性选择器

【通过指定的属性名和属性值进行选择】

<html lang="en">
<head><meta charset="UTF-8"><title>属性选择器</title><style>/*范围越大，则优先级越小，type有具体值则先执行*/[type] {color: blue;}[type=password] {color: chocolate;}[type=text] {color: pink;}</style>
</head>
<body>用户名：<input type="text"/><br/>密码：<input type="password"/><br/>邮箱：<input type="email"/><br/>
</body>
</html>

8.伪类选择器

【通过对操作状态进行选择(未访问、悬停、访问中、访问后)】

<html lang="en">
<head><meta charset="UTF-8"><title>伪类选择器</title><style>a {text-decoration: none;}/*对标签的状态进行选择【伪类选择器】*//*未访问的状态*/a:link {color: black;}/*已访问的状态*/a:visited {color: red;}/*鼠标悬浮的状态*/a:hover {color: blue;}/*已选择的链接状态【正在访问】*/a:active {color: green;}/*注意: a:hover必须在css定义中的 a:link 和 a:visited之后，才能生效!a:active必须在 css 定义中的 a: hover之后才能生效!伪类名称对大小写不敏感。*/</style>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">百度一下</a>
</body>
</html>

9.组合选择器

【组合几种选择器进行选择】

<html lang="en">
<head><meta charset="UTF-8"><title>组合选择器</title><style>/*后代选择器*/.top li {color: red;}.center li {color: blue;}/*分组选择器*/span,#p1 {color: green;}</style>
</head>
<body>
<div class="top"><ol><li>aa</li><li>bb</li></ol>
</div>
<div class="center"><ul><li>aa</li><li>bb</li></ul>
</div><span>span</span>
<p id="p1">段落1</p>
<p>段落2</p>
</body>
</html>