这是我参与「第四届青训营 」笔记创作活动的的第1天！#
#什么是CSS?#
- CSS全称:Cascading Style Sheets
- 用于定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
CSS
CSS:页面美化和布局控制
1.概念：CSS（Cascading Style Sheets）层叠样式表。
层叠：多个样式可以作用在同一个html的元素上，同时生效。
2.好处：功能比较强大，将内容的一个展示和样式控制分离（降低耦合度，让分工写作更容易，提高开发效率）。
CSS的使用
CSS与HTML的结合方式：
1.内联样式：在标签内使用style属性指定css代码(不推荐使用)
2.内部样式：*在head标签内,定义style标签,style标签的标签体内容就是css代码(比较常用)
3.外部样式：先定义css资源文件，然后在head标签内,定义link标签,引入外部的资源文件。
注意：1、2、3种方式，CSS作用范围越来越大。1方式不常用，后期常用2.3.
程序演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS和HTML结合</title>
<!--
2.内部样式:
*在head标签内,定义style标签,style标签的标签体内容就是css代码(比较常用)
-->
<style>
div{
color:blue;
}
</style>
<!--定义好css文件并引入外部资源文件后,下方输出的hello css会变为绿颜色,反正就是成功了我也不知道为啥内部样式抢不过它-->
<link rel="stylesheet" href="css/a-1.css/">
<!--也可以通过style标签,里面通过@import来导入css文件也可以-->
<style>
@import url(css/a-1.css);
</style>
</head>
<body>
<!--
1.内联样式:
*在标签内使用style属性指定css代码(不推荐使用)
-->
<div style="color:red;">hello css</div>
<!--这一句受到内部样式的div影响,会变成蓝颜色的-->
<div>hello css</div>
<!--因为link标签引入的外部资源,上面这个div包裹的内容会变为green-->
<!--
3.外部样式:
1.定义css资源文件
2.在head标签内,定义link标签,引入外部的资源文件
-->
</body>
</html>
CSS基本语法
格式：
选择器{
属性名1:属性值1;
属性名2:属性值2;
…;
}
选择器：筛选具有相似特征的元素。
注意：每一对属性需要使用分号隔开，最后一对属性可以不加分号，加了也没事。
程序演示：
第一步：定义css文件
第二部代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<!--rel属性用于定义链接的文件和HTML文档之间的关系-->
<!-- StyleSheet，的意思就是样式调用-->
<link rel="stylesheet" href="css\a-2.css">
</head>
<body>
<!--1.定义css文件-->
<div>div</div>
<p>p</p>
</body>
</html>
基础选择器
1.id选择器：选择具体的id属性值的元素。
2.元素选择器：选择具有相同的class属性值的元素。
3.类选择器：选择具有相同的class属性值的元素。
程序演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
<!--2.定义css代码-->
<style>
/*#是语法的标识,div1表示选择id为div1的元素*/
#div1{
color: red;
}
/*元素选择器*/
div{
color: green;
}
/*类选择器*/
.cla1{
color: blue;
}
</style>
</head>
<body>
<!--
1.id选择器:选择具体的id属性值的元素
*语法:#id属性值{}
建议:在一个html页面中id值唯一
-->
<div id="div1">爱意随风去</div>
<!--
2.元素选择器:选择具有相同标签名称的元素
*语法:标签名称{}
注意:id选择器优先级高于元素选择器
-->
<div>风止意难平</div><!--经运行证明id选择器的优先级比元素选择器的优先级更高-->
<!--
3.类选择器:选择具有相同的class属性值的元素
语法:.class属性值{}
注意:id选择器>类选择器>元素选择器
-->
<p class="cla1">与其追风去</p>
<!--4.多个标签可以使用同一个class,看看元素选择器和类选择器哪个优先级高-->
<div class="cla1">不如等风来</div><!--很明显类选择器的优先级高于元素选择器-->
<div>----</div>
</body>
</html>
扩展选择器
1、*：表示选择所有元素。
语法：*{ }
2、并级选择器：
语法：选择器1，选择器2{ }
3、子选择器：筛选选择器1下的选择器2元素。
语法：选择器1 选择器2{ }
4、父选择器：筛选选择器2的父元素选择器1。
语法：选择器1>选择器2{ }
5、属性选择器：选择元素名称，属性名=属性值的元素。
语法：元素名称[属性名=”属性值”]
6、伪类选择器：选择一些元素具有的状态。
语法：元素：状态{ }
例如：< a >
状态：
link：初始化的状态。
visited：被访问后的状态。
active：正在被访问状态。
hover：鼠标悬浮状态。
程序演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>扩展选择器</title>
<style>
/*1.子类选择器:挑选div标签下的p标签*/
div p{
color: red;
}
/*2.父类选择器:筛选p标签的div标签(选择p标签的父元素div)*/
div>p{
/*让div标签有边框,不是让p标签有边框*/
border: 1px solid;
}
/*3.属性选择器:表示选择input标签,并且类型是文本输入框的input标签*/
input[type='text']{
/*加一个边框*/
border: 5px solid;
}
/*4.通过伪类选择器控制a标签不同状态下的不同样式*/
/*4.1未被访问的状态*/
a:link{
color:pink;
}
/*4.2鼠标悬停效果*/
a:hover{
color: green;
}
/*4.3正在访问*/
a:active{
color: yellow;
}
/*4.4被访问后的效果*/
a:visited{
color:red;
}
</style>
</head>
<body>
<div>
<p>如果清晰是种罪</p>
</div>
<p>就让爱去蔓延</p>
<!--2.1因为这个div标签没有p标签,所以不会受到负类选择器的影响-->
<div>如果你还没有睡</div>
<input type="text"><br>
<input type="password">
<br>
<a href="https://www.baidu.com" target="_blank">百度一下你就知道</a>
</body>
</html>
CSS属性1
常用属性：
1. 字体、文本（font）
font-size：字体大小。
color：文本颜色。
text-align：对齐方式。
line-height：行的高度。
2. 背景
background：符合属性，设置对象的背景特性。
3. 边框、轮廓
border：设置边框，复合属性。
4. 尺寸
width：宽度。
height：高度。 程序演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体属性</title>
<style>
/*1.定义一个元素选择器,选择p标签*/
p{
/*颜色*/
color: red;
/*字体大小*/
font-size: 30px;
/*让字体居中显示*/
text-align: center;
/*行高,由于字体大小并不会改变,没有设置边框所有我们看不到这个行高有多高*/
line-height: 200px;
/*边框,solid是实线的意思*/
border: 10px solid black;
}
div{
/*可以看到,div标签我们什么类容都还没写,却有边框*/
border: 5px solid red;
/*尺寸*/
height: 200px;
width: 200px;
/*
给div设置一个背景图片,图片会自动填充
no-repeat:图片不重复填充.
center:图片居中显示.
*/
background: url("img/R-C.webp") no-repeat center;
}
</style>
</head>
<body>
<p>新年快乐!</p>
<div>一闪一闪亮晶晶</div>
</body>
</html>
盒子模型：控制布局。
属性：
margin：外边距。
padding：内边距；默认情况下内边距会影响整个盒子的大小。
box-sizing: border-box：设置盒子的属性，让width和height就是最终盒子的大小。
float：浮动，可以选择左右浮动（left或right） 程序演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
div{
border: 5px solid red;
/*调整div使最下面三个div的方框大小一样*/
width: 100px;
}
.div1{
width: 100px;
height: 100px;
/*通过调整外边距使方框居中展示*/
/*margin: 45px;*/
}
.div2{
width: 200px;
height: 200px;
padding: 40px;
/*
设置盒子的属性,让width和height就是最终盒子的大小.
否则内边距会影响整个盒子的大小.
*/
box-sizing: border-box;
}
/*让div3浮动起来*/
.div3{
float: left;
}
/*让div4也左浮动一下*/
.div4{
float: left;
}
/*让div5与3和4在同一行但是在最右侧*/
.div5{
float: right;
}
</style>
</head>
<body>
<div class="div2">
<div class="div1"></div>
</div>
<div class="div3">111111111111</div>
<div class="div4">222222222222</div>
<div class="div5">333333333333</div>
</body>
</html>
