文章目录
CSS
- css的主要使用场景就是美化网页，布局页面使用
- css即层叠样式表（Cascading Style Sheets）的简称
- css主要用于设置HTML页面中的文本内容（字体，大小，对齐方式），图片的外形（宽高，边框样式，边距等）以及版面的布局和外观显示样式。
- css规则由两个主要部分构成：选择器以及一条或多条声明。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>01-css体验语法</title>
<style>
/* 选择器 {样式} */
p {
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<p>生活很美好</p>
</body>
</html>
引入css方式
（1）行间样式 ： 使用style属性
（2）页面级样式：使用style标签（放在head标签内）
（3）引入css文件：使用link标签在head内引入
<link rel="stylesheet" href="css/index.css">
css代码风格
1.样式格式书写
- 展开格式
p { color: red; font-size: 12px; }
2.样式大小写风格
- 全部使用小写
3.样式空格风格
- 属性值前面，冒号后边，保留一个空格
- 选择器（标签）和大括号中间保留空格
css选择器
css基础选择器
标签选择器(元素选择器)
- 使用HTML标签名作为选择器
- 优点：能快速为页面中同类型的标签统一设置样式
- 缺点：不能设计差异化样式，只能选择全部的当前标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> /* 选择器 {样式} */ p { color: green; } div { color: pink; } </style> </head> <body> <p>生活很美好</p> <div>life is shit</div> </body> </html>
类选择器(常用)
-
能差异化选择不同标签，单独选一个或某几个标签
-
注意
- 长名称或词组可以使用中横线来为选择器命名
- 不要使用纯数字，中文等命名，尽量使用英文字母来表示
- 命名要有意义，尽量使别人一眼就知道这个类名的目的（这里我的代码不符合规范）
- 命名规范：Web前端开发规范手册.doc
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>03-类选择器</title> <style> /* 选择器 {样式} */ .ii { color: green; } .dd { color: pink; } </style> </head> <body> <ul> <li class="ii">おはよう</li> <li class="ii">こんにちは</li> <li>こんにちは</li> </ul> <div class="dd">今まで</div> </body> </html>
- 练习1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>练习1</title> <style> .pink { width: 100px; height: 100px; background-color: pink; } .yellow { width: 100px; height: 100px; background-color: yellow; } </style> </head> <body> <div class="pink">いち</div> <div class="yellow">に</div> <div class="pink">さん</div> </body> </html>
类选择器的多类名使用
-
类名之间用空格分割
-
多类名开发中使用场景
- （1）可以把一些标签元素相同德阳市放到一个类里面
- （2）这些标签都可以调用这个公共的类，然后再调用自己独有的类
- （3）从而节省css代码，统一修改也方便
-
练习1 -> 代码修改
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>练习1</title> <style> .box { width: 100px; height: 100px; } .pink { background-color: pink; } .yellow { background-color: yellow; } </style> </head> <body> <div class="box pink">いち</div> <div class="box yellow">に</div> <div class="box pink">さん</div> </body> </html>
id选择器(一般和js搭配)
- 为标有特定id的HTML元素指定特定的样式
- id属性只能在每个HTML文档中出现一次
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>03-id选择器</title> <style> #springgreen { color:springgreen; } </style> </head> <body> <div id="springgreen">よん/し</div> </body> </html>
通配符选择器
- 表示选取页面中所有元素（标签）
- 特殊情况适用（清除标签内外边距）
* { margin: 0; padding: 0; }
css复合选择器(待补充。。)
派生选择器（子子孙孙都包含）
.a p .span {}
子元素选择器
.a > span {}
属性选择器
[]
[class = a] {}
[class ^= a] {} //a开头
[class $= a] {} //a结尾
伪类选择器
伪元素选择器
权重
| ！important | 行内 | id | class/属性/伪元素 | 标签 | 通配 |
|---|---|---|---|---|---|
| ∞ | 1000 | 100 | 10 | 1 | 0 |
设置颜色
1. color:red;
2. color:#ff0000; //rgb饱和度
3. color:rgb(255,255,255）
边框
border： 1px solid #000;
==> border-width: 1px;
border-style: solid;
border-color: #000;
css字体属性
- CSS Fonts（字体）属性用于定义字体系列、大小、粗细、和文字样式（如斜体）。
- g谷歌默认字体-微软雅黑
p72<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>03-id选择器</title> <style> #first { font-family: '微软雅黑' } #second { font-family:'Courier New', Courier, monospace } #third { font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif } </style> </head> <body> <h3 id="first">微软雅黑</h3> <h3 id="second">第二种</h3> <h3 id="third">第三种</h3> </body> </html>
