CSS
表现类似外观装饰
设置文本内容（字体、大小、对齐方式）、图片外形（宽高、边框样b’b
语法规范
由选择器及一条或多条声明构成
属性与属性值之间用英文：分开
多个键值对之间用英文1；区分
代码风格
展开式、小写、属性值前冒号后面保留一个空格、选择器和大括号中间保留空格更直观
选择器作用
根据不同需求把不同标签选出来
基础选择器：
标签选择器：按标签名称分类，同一类型可设置，不能差异化设置
类选择器：单独选择一个或某几个标签
口诀：样式点定义 结构类（class)调用 一个或多个 开发最常用
“.”(英文点）进行标识，后面紧跟类名（自定义）
长名称或词组可用中横线来命名
不要使用纯数字、中文等命名
命名要有意义，一眼能看出来目的的类名
导航：nav
侧栏：sidebar
栏目：column
登录条：loginbar
子导航：ssubnav
……
利用类画盒子：
类选择器-多类名：
给一个标签指定多个类名
节省了代码也方便修改
id选择器：
以#来定义
口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用
区别类选择器：
类选择器好比人名，一个人可有多名，一名可被多人使用
id选择器好比身份证号码，唯一不重复
最大区别在使用次数上
通配符选择器：
使用*定义，选取页面中所有元素（标签）
字体属性
CSS Fonts属性用于定义字体系列、大小、粗细、文本样式
p { front-family:"微软雅黑"；}
div {front-family:Arial,"Microsoft Yahei","微软雅黑"；}
各个字体之间必须使用英文状态下逗号隔开
有空格隔开的多个单词组成的字体加引号
尽量使用系统默认自带字体，保证在任何浏览器中都能正确显示
font-size属性定义字体大小
P {
font-size:20px;
}
px是最常用单位
谷歌浏览器默认文字大小为16px
尽量给明确值大小，不要默认大小
可以给body指定整个页面文字的大小
标题需要单独指定文字大小
font-weight属性定义字体粗细
400相当于normal,700等同于bold,无单位
使用font-style属性设置文本风格
p {
font-style:normal;
}
italic倾斜
让倾斜变正
复合属性写法：
有严格的顺序，不可更换，用空格隔开
不需要设置的属性可以省略，但必须保留font-size和font-family属性，否则font属性将不起作业
文本属性
定义文本的外观，颜色、对齐文本、装饰文本、文本缩进、行间距
color：属性定义文本颜色：
div {
color: red;
}
text-align：用于设置元素内文本内容的水平对齐方式
div {
text-align: center;
}
left、right、center
text-decoration：属性规定添加到文本的修饰，可以给文本添加下划线、删除线、上划线
div {
text-decoration: underline;
}
text-indent属性指定文本的第一行的缩进，通常将段落首行进行缩进
p {
text-indent: 2em;
}
em是一个相对单位，就是当前元素1个文字的大小
line-height：行间距，控制行与行之间距离
p {
line-height: 26px;
}
行间距：上下间距+文字间距
引入方式
按书写位置分三类：
1、行内样式表（行内式）
2、内部样式表（嵌入式）
3、外部样式表（链接式）
内部样式表：写到html页面内部，将所有的CSS代码抽取出来，单独放到一个
<style>
div {
color: red;
font-size: 12px;
}
</style>
好像软件出问题了……一脸懵
style理论上可以放在html文档的任何地方，但一般放文档的标签中
结构与样式相分离
行内样式表：在元素标签内部的style属性中设定CSS样式
<div style="color:red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>
style是标签属性
在双引号中间，写法要符合CSS规范
可以控制当前的标签设置样式
没有结构与样式相分离，用的少
外部样式表（最常用）：
实际开发都是外部样式表，适用样式比较多，核心是样式单独写到CSS中，之后把CSS文件引入到HTML页面中使用
1，新建一个后缀名为.css的样式文件，把所有CSS代码都放入此文件中
2，在HTML页面中，使用标签引入这个文件
<link rel=stylesheet" href="css文件路径“>
水平线标签
chrome调试工具：
调试HTML结构和CSS样式
打开chrome浏览器，按f12键或者右击页面空白处—>检查，选elements
使用调试工具：
ctrl+滚轮缩放
黑箭头定位，修改右边style调试，去原代码修改
ctrl+0复原浏览器大小
如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误
如果有样式，但是样式前面有黄色感叹号提示，则是样式属性书写错误
Emmet语法
前身是Zen coding，使用缩写来提高编写速度，vscode内部已经集成改语法
1、快速生成html结构语法
2、快速生产css样式语法
3、快速格式化代码**(shift+alt+f)**
vs中：
复合选择器
建立在基础选择器之上
后代选择器（重要）：
元素1 元素2 {样式声明}
1，2之间用空格隔开，1，2可以是任意的基础选择器里组合
1是父级2是子级等后代 ，最终选择是元素2
子元素选择器：
只选最近一级子元素（亲儿子）
元素1>元素2{样式声明}
中间用大于号隔开
1是父2是子，最终选择的是元素2
2必须是亲儿子
并集选择器（重要）：
可以选择多组标签，同时为他们定义相同样式
用英文逗号隔开，可理解为和
元素1，元素2 {样式声明}
链接伪类选择器：
向某选择器添加特殊效果
用冒号表示
按照LVHA的顺序声明:link-:visited-:hover-:avtive
口诀：love hate或者lv 包包hao
focus伪类选择器：
选取获得焦点的表单元素
焦点就是光标，一般情况类表单元素才能获取
input :focus {
background-color:yellow;
}
开学了，后续继续更新……
练习1：
添加css文件
new+file+后缀改.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<style>
p{
color:red;
}
</style>
<link rel="stylesheet" href="src\web.css">
<!-- 切记颜色单词别打错了-->
</head>
<body>
<p>
好的
</p>
<div>加油</div>
<img src="img/111.jpg" width="500px">
<br/>
<!--音频-->
<audio src="img/111.mp3" width="100px;" controls="controls" autoplay="autoplay"></audio>
<br/>
<!--视频-->
<video src="img/111.mkv" width="500px;"controls="controls" autoplay="autoplay"></video>
</body>
</html>
div{
color:skyblue;
font-size:36px;
width:200px;
height:200px;
background-color:pink;
border:2px double red;
}
元素类型和盒模型
练习2：
选择器
<!--选择器-->
<!--1.元素选择器-->
<!--2.class类选择器-->
<!--（之前必须加一个英文状态下的点，表示class的名，可以有多个用空格隔开）-->
<!--3.id选择器-->
<!--（同2，加#，唯一性体现在js中）-->
<!-- 4.群组选择器-->
<!-- 相同属性标签可用-->
<!-- 5.包含选择器-->
<!-- 选择器用空格隔开，前父后子关系-->
<!-- 6.伪选择器-->
<!-- 选择器：hover{属性名：属性值；属性名：属性值；}-->
<!-- 冒号要紧贴选择器-->
<!-- 7.通配符选择器-->
<!-- *{}-->
<p>段落标签</p>
<p class="dome demo2">段落标签</p>
<span class="demo2">字节标签</span>
<div id="box">上邪</div>
<div id="box2">我欲与君相知，长命无绝衰</div>
<p class="demo3">山无陵，江水为竭，冬雷震震夏雨雪，天地合，乃敢与君绝</p>
<div class="text">
<p class="tit">独立寒秋</p>
</div>
<br/><br/><br/>
<ul>
<li>好</li>
<li>好</li>
<li>学</li>
<li>习</li>
</ul>
<br/>
<a href="http://www.baidu.com">百度一下</a>
.dome{
color:skyblue;
}
.dome2{
font-size:36px;
}
#box{
color:green;
}
#box2,.demo3{
font-size:50px;
color:orange;
}
.text .tit{
color:purple;
background-color:coral;
}
ul li{
background-color:coral;
}
a:hover{
background-color:orange;
font-size:28px;
color:red;
}
ul li:hover{
background-color:pink;
}
*{
padding:0;
margin:0;
}
padding和margin清除行间距
浮动和定位
框架像素得大一点
<div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
<p>相对定位</p>
<!--relative-->
<div class="father">
<div class="son"></div>
<!-- 绝对定位：absolute-->
*{
padding:0;
margin:0;
}
.box1{
width:100px;
height:100px;
background-color:pink;
float:left;
border:2px solid red;
}
.box2{
width:100px;
height:100px;
background-color:blue;
float:right;
}
.box3{
width:50px;
height:50px;
background-color:blue;
float:right;
}
p{
width:100px;
height:100px;
background-color:orange;
position:relative;
left:100px;
top:50px;
}
.father{
width:300px;
height:300px;
border:2px solid black;
}
.father .son{
width:100px;
height:100px;
background-color:green;
position:absolute;
left:0;
bottom:0;
}
案例：
注意图片像素大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<style>
p{
color:red;
}
</style>
<link rel="stylesheet" href="src\web.css">
<!-- 切记颜色单词别打错了-->
</head>
<body>
<div class="list">
<div class="item">
<img src="img/111.jpg"/>
</div>
<div class="item">
<img src="img/222.jpg"/>
</div>
<div class="item">
<img src="img/333.jpg"/>
</div>
<div class="item">
<img src="img/444.jpg"/>
</div>
<div class="item">
<img src="img/555.jpg"/>
</div>
<div class="item">
<img src="img/666.jpg"/>
</div>
</div>
</body>
</html>
*{
padding:0;
margin:0;
}
.list{
width:600px;
border:2px solid red;
overflow:hidden;
}
.list .item{
width:200px;
height:200px;
float:left;
}
.item img:hover{
opacity:0.5;
}
opacity不透明度
文字声明
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<link rel="stylesheet" href="src\web.css">
<!-- 切记颜色单词别打错了-->
</head>
<body>
<div class="box">
<h2>加油<span>jiayou</span></h2>
<p>好好学习</p>
<p>天天向下</p>
<a href="http://www.baidu.com">查看</a>
</div>
</body>
</html>
```html
*{
padding:0;
margin:0;
}
.box{
width:500px;
height:600px;
border:1px solid black;
margin:50px auto;
padding:20px;
}
.box p{
color:#FF0000;
font-size:20px;
font-family:"宋体";
text-indent:32px;
line-height:24px;
letter-spacing:10px;
word-spacing:5px;
}
.box h2{
text-align:center;
font-weight:normal;
font-style:oblique;
}
.box a{
text-decoration:line-through;
color:blue;
}
h2 span{
display:block;
font-size:12px;
color:#888;
word-spacing:5px;
text-transform:uppercase;
}
溢出列表声明
*{
padding:0;
margin:0;
}
.box{
width:500px;
height:600px;
border:1px solid black;
margin:0 auto;
}
.box p{
color:#666;
font-size:16px;
line-height:32px;
text-indent:32px;
width:500px;
white-space:nowrap;
over-flow:hidden;
text-overflow:clip;
}
```html
*{
padding:0;
margin:0;
}
.list{
margin:50px auto 0;
width:400px;
background-color:blue;
list-style-position:inside;
list-style-type:square;
list-style-image:url(img/111.jpg);
}
不同颜色遮罩层
**过渡和动画**
```html
*{
padding:0;
margin:0;
}
.box{
width:300px;
height:200px;
border:2px solid red;
transform:translate(200px,100px);
transform:scale(0.5,1);
transform:rotate(30deg);
transform:skewX(30deg);
}
.box img{
display:block;
width:100%;
height:100%;
}
*{
padding:0;
margin:0;
}
.box{
width:300px;
height:200px;
transition:all 1s;
}
.box img{
display:block;
width:100%;
height:100%;
}
.box:hover{
transform:translateY(500px);
border:6px solid purple;
width:200px;
}
*{
padding:0;
margin:0;
}
.box{
width:100%;
height:40px;
background-color:pink;
animation:cheng 1s 3;
}
@keyframes cheng{
0%{
width:0%;
}
20%{
width:20%;
}
40%{
width:40%;
}
60%{
width:60%;
}
80%{
width:80%;
}
100%{
width:100%;
}
}
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<link rel="stylesheet" href="src\web.css">
<!-- 切记颜色单词别打错了-->
</head>
<body>
<div class="loading"></div>
<div class="photo">
<img src="img/01.png"/>
</div>
</body>
</html>
*{
padding:0;
margin:0;
}
body{
background-color:skyblue;
}
.loading{
width:200px;
height:200px;
border:4px solid red;
margin: 50px auto;
border-radius:50%;
border-bottom:4px solid black;
animation:cheng 1s infinite linear;
}
@keyframes cheng{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
.photo{
width:300px;
height:300px;
border:1px solid black;
margin:0 auto;
}
.photo img{
display:block;
width:100%;
transition:all 1s;
}
.photo img:hover{
transform:translateY(-300px) scale(0.5,0.5) rotate(180deg);
}
做完后可以去边框
背景声明
媒体查询
*{
padding:0;
margin:0;
}
.box{
width:100%;
height:300px;
border:2px solid black;
font-size:100px;
}
@media screen and (min-width:1200px){
.box{
font-size:100px;
}
}
@media screen and (min-width:980px) and (max-width:1200px){
.box{
font-size:50px;
}
}
@media screen and (max-width:980px){
.box{
font-size:30px;
}
}
自适应网站案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<link rel="stylesheet" media="screen and (min-width:1200px)" href="src\web.css">
<link rel="stylesheet" media="screen and (min-width:900px)" href="src\web2.css">
<link rel="stylesheet" media="screen and (max-width:900px)" href="src\web3.css">
<!-- 切记颜色单词别打错了-->
<style>
div img{
width:200px;
height:200px;
}
</style>
</head>
<body>
<div class="box">
<h2 class="title">商业版</h2>
<ul class="list">
<li><img src="img/222.jpg"/>
<div class="word">
<h4>商用 Surface</h4>
<p>不好好学习一定会后悔</br>努力学习将来会感谢自己</p>
<a href="">立即抢购></a>
</div>
</li>
<li><img src="img/222.jpg"/>
<div class="word">
<h4>商用 Surface</h4>
<p>不好好学习一定会后悔</br>努力学习将来会感谢自己</p>
<a href="">立即抢购></a>
</div>
</li>
<li><img src="img/222.jpg"/>
<div class="word">
<h4>商用 Surface</h4>
<p>不好好学习一定会后悔</br>努力学习将来会感谢自己</p>
<a href="">立即抢购></a>
</div>
</li>
<li><img src="img/222.jpg"/>
<div class="word">
<h4>商用 Surface</h4>
<p>不好好学习一定会后悔</br>努力学习将来会感谢自己</p>
<a href="">立即抢购></a>
</div>
</li>
</ul>
</div>
</body>
</html>
*{
padding:0;
margin:0;
}
.list{
list-style-type:none;
}
a{
text-decoration:none;
}
.box{
width:90%;
margin:50px auto;
}
.title{
font-size:30px;
margin-bottom:20px;
}
.list{
margin-left:-1%;
}
.list li{
float:left;
width:24%;
margin-left:1%;
}
.list img{
display:block;
width:100%;
}
.word{
margin-top:30px;
}
h4{
font-size:20px;
}
a{
display:block;
color:deepskyblue;
margin-top:10px;
}
*{
padding:0;
margin:0;
}
.list{
list-style-type:none;
}
a{
text-decoration:none;
}
.box{
width:90%;
margin:50px auto;
}
.title{
font-size:30px;
margin-bottom:20px;
}
.list{
margin-left:-1%;
}
.list li{
float:left;
width:49%;
margin-left:1%;
margin-bottom:10px;
}
.list img{
display:block;
width:100%;
}
.word{
margin-top:30px;
}
h4{
font-size:20px;
}
a{
display:block;
color:deepskyblue;
margin-top:10px;
}
4349
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
