文章目录
一、CSS
1.1 CSS的概念
1.CSS（Cascding Style Sheet）层叠样式表。
作用：用来控制HTML标签的展示样式，从而使得标签的样式展示的更加的丰富。可以提高页面的执行效率。
2.CSS与HTML配合使用的方式：
<!--内联样式:在标签内使用style属性指定css代码-->
<div style="color: red">CSS</div>
<!--内部样式:在head标签内，定义style标签，style标签的标签体内容就是css代码-->
<style>
div{
color: blue;
}
</style>
<!--外部样式
1.定义css的资源文件
2.head标签内，定义link标签 引入外部的资源文件-->
<link rel="stylesheet" href="css/a.css">
<!--外部样式也可以写成这种形式-->
<style>
@import "css/a.css";
</style>
1.2 CSS的语法：
格式：
<style type="text/css">
选择器 {
属性名1:属性值1;
属性名2:属性值2;
...
}
</style>
选择器:筛选具有相似特征的元素
注意：每一对属性之间需要用“;”隔开，最后一对属性可以不加
1.2.1 选择器
选择器：筛选具有相似特征的元素
分类：
1.基础选择器
1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一
* 语法：#id属性值{}
2. 元素选择器：选择具有相同标签名称的元素
* 语法： 标签名称{}
* 注意：id选择器优先级高于元素选择器
3. 类选择器：选择具有相同的class属性值的元素。
* 语法：.class属性值{}
* 注意：类选择器选择器优先级高于元素选择器
2.扩展选择器：
1. 选择所有元素：
* 语法： *{}
2. 并集选择器：
* 选择器1,选择器2{}
3. 子选择器：筛选选择器1元素下的选择器2元素
* 语法： 选择器1 选择器2{}
4. 父选择器：筛选选择器2的父元素选择器1
* 语法： 选择器1 > 选择器2{}
5. 属性选择器：选择元素名称，属性名=属性值的元素
* 语法： 元素名称[属性名="属性值"]{}
6. 伪类选择器：选择一些元素具有的状态
* 语法： 元素:状态{}
* 如： <a>
* 状态：
* link：初始化的状态
* visited：被访问过的状态
* active：正在访问状态
* hover：鼠标悬浮状态
对上述选择器的使用：
ID选择器：选择具体的id属性值的元素
<head>
<meta charset="utf-8">
<title>ID选择器</title>
<style type="text/css">
#div1{
color: yellow;
font-size: 50px;
background: lightyellow;
}
</style>
</head>
<body>
<div id="div1">
<ul>
<li>1</li>
<li>22</li>
<li>333</li>
<li>4444</li>
</ul>
</div>
</body>
类选择器：选择具有相同的class属性值的元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>类选择器</title>
<style type="text/css">
.myClass{
color: #FFFF00;
font-size: 40px;
}
</style>
</head>
<body>
<div id="" class="myClass">
<ul>
<li>1</li>
<li>22</li>
<li>333</li>
<li>4444</li>
</ul>
</div>
<div id="div2" class="myClass">
<ul>
<li>1</li>
<li>22</li>
<li>333</li>
<li>4444</li>
</ul>
</div>
<h1 class="myClass">标题</h1>
<ul class="myClass">
<li>diyihang</li>
</ul>
</body>
</html>
通配符：选择所有的元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通配符</title>
<style type="text/css">
/* 全局通配符 不建议使用
*{
color: #0000FF;
} */
/* 使用局部通配符 */
#div1 *{
color: #FF00E0;
font-size: 30px;
}
#div2 *{
color: #000000;
font-size: 50px;
}
#div2 span{
font-size: 50px;
color: #FFFFE0;
}
#div3 #span1 ul{
color: crimson;
font-size: 50px;
}
</style>
</head>
<body>
<div id="div1">
<ul>
<li>asdfadfs</li>
</ul>
<span>asdfasdfasdf</span>
<h1>asdfasdfasdf</h1>
<b>aaaaaaaaaaaaaaaaaaaaa</b>
</div>
<div id="div2">
<h1>asdfasdf</h1>
<h1>asdfasdf</h1>
<h1>asdfasdf</h1>
<span>asdfasfd</span>
</div>
<div id="div3">
<span id="span1">
<ul>
<li>多级</li>
</ul>
</span>
<span id="span2">
<ul>
<li>多级</li>
</ul>
</span>
</div>
<ul>
<li>111111111111111111asdfadfs</li>
<li>111111111111111111asdfadfs</li>
<li>111111111111111111asdfadfs</li>
<li>111111111111111111asdfadfs</li>
</ul>
<span>asdfasdfasdf</span>
<h1>asdfasdfasdf</h1>
<b>aaaaaaaaaaaaaaaaaaaaa</b>
</body>
</html>
子选择器：筛选选择器1元素下的选择器2元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>包含选择器</title>
<style type="text/css">
#div1 span{
color: #0000FF;
}
#div2 span{
color: #FFFFE0;
}
ul li{
color: blue;
font-size: 20px;
}
ol li{
color: #000000;
font-size: 60px;
}
#div3 div div h1{
font-size: 100px;
color: dimgrey;
}
</style>
</head>
<body>
<div id="div1">
<span>111asdfasdfa</span>
</div>
<div id="div2">
<span>222asdfasdfa</span>
</div>
<ul>
<li>列表项</li>
<li>列表项</li>
</ul>
<ol>
<li>列表项222</li>
<li>列表项22</li>
<li>列表项2</li>
</ol>
<div id="div3">
<div id="">
<div id="">
<h1>bbbbbaaaaaaaaaa</h1>
</div>
</div>
</div>
</body>
</html>
我们使用较多的还有一个伪类选择器：
其中有两种状态 悬浮和按下这两种状态，其他HTML元素同样使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a:link{
font-size:50px;
/* 设置线条的样式 none 不要线条 */
text-decoration:none;
}
a:hover{
color: red;
/* 设置下划线 */
text-decoration:underline;
}
a:active{
color: #FFFF00;
}
a:visited{
font-size: 20px;
}
</style>
</head>
<body>
<a href="#">
跳到主页
</a>
</body>
</html>
选择器的优先级：
多个选择器，选中同一个标签，然后分别进行样式的控制
如果多个选择器，控制的样式不冲突，那么他们就叠加生效。
如果说多个选择器，选中了同一个标签，对他 的样式进行控制，如果出现了冲突，
那么该听哪个选择器。
其实我们的选择器他有一个优先级，如果出现冲突，听优先级高的。
内联样式>id选则器>class选则器>标签选择器
CSS 优先规则3：优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
1.3 CSS的属性设置：
1.3.1 字体的设置
* font-size：字体大小
* font-family：设置字体
* font-style：设置字体的样式（normal-正常，italic-斜体，oblique-歪斜体）
* text-shadow：设置字体的阴影
* color：文本颜色
* text-align：对其方式
* line-height：行高
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体属性</title>
<style>
p{
color: pink;
font-size: 30px;
text-align: center;
line-height: 100px;
/*边框*/
border: 1px blue solid;
/*尺寸 width height*/
}
div{
border: 1px blue solid;
height: 200px;
width: 200px;
/*背景*/
background:url("img/logo.jpg") no-repeat center;
}
</style>
</head>
<body>
<p>文章</p>
<div></div>
</body>
</html>
1.3.2 背景的设置
*background-color:背景颜色
*background-image:背景照片
*background-attachment:设置背景图片是否随着滚动条移动（scroll-是，fixed-图片固定不动）
*background-repeat:设置背景图片是否重复(repeat:背景图片重复显示，repeat-x：背景图片水平重复，repeat-y：背景图片垂直方向重复，no-repeat：不重复)
1.3.3 边框的设置
边框的样式：border-style
border-top-style
border-bottom-style
border-left-style
border-right-style
取值：（none 没有边框。dotted 点线。dashed 虚线。solid 实线。double 双实线。groove 凹型线。ridge 凸型线。inset 嵌入式。outset 嵌出式）
边框的宽度： border-width
border-top-width
border-bottom-width
border-left-width
border-right-width
取值：（thin ----细边框。medium ---中等边框。thick--粗边框。长度---数字）
边框的颜色： border-color
border-top-color
border-bottom-color
border-left-color
border-right-color
取值：英文单词 。 RGB 颜色码
边框的圆角：border-radius：
举例：border-radius:50px;
边框的阴影：border-shadow：
举例：box-shadow: 10px 10px 5px #888888;//添加阴影
X方向的偏移像素
Y方向的偏移像素
模糊的像素值
阴影颜色
1.3.4 补充属性
1.div标签中对于溢出的内容的处理，默认处理方式为显示溢出的内容
这里可以设置overflow的属性值，对于内容的控制
overflow: auto 自动，超过加上滚动条
overflow:hidden 溢出 的内容不要了
overflow:visible; 显示溢出的内容 默认值
overflow:scroll 内容不超出，也加上滚动条。
2.添加文字的修饰：text-decoration
underline----添加下划线
overline---添加上划线
line-through--添加删除线
blink---添加闪烁效果（只能在Netscape的浏览器中正常显示）
none--没有任何的修饰
3.控制文本的排列以及对齐方式：text-align
left--左对齐
right--右对齐
center--居中对齐
justify--两端对齐
4.放大缩小位移：transform
transform:rotate(30deg);//旋转30度
transform:translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素
transform:scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
transform:skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。
过度动画：
transition: width 2s;
宽度变化时长为2秒
5.对于有套嵌关系的标签来说，当设置外标签的内边距时，会将外标签进行相应的撑大变化。
这时设置box-sizing: border-box可以保证外边框不变。
6.转换文字的大小写：text-transform
text-transform: uppercase;//转大写
text-transform: lowercase;//转小写
1.3.5 重要的属性
1.float 属性定义元素在哪个方向浮动。只要是块标签，都可以浮动
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。
2.盒子模型：控制布局
把外层设置为盒子模型，是一种弹性布局，可以很好的适配屏幕
display: flex;
子层自动适配盒子模型，自层会居中分配：margin: auto。
外层设置：display: flex
justify-content:：让盒子里面的子层显示形式
flex-wrap: wrap：当所有子层，累加的高度或宽带，超过了盒子的宽度和高度，默认会挤压
flex-wrap取值：
wrap 自动换行
nowrap 不换行，挤压，默认
wrap-revers 反向换行
justify-content取值：
左对齐flex-start，
居中对齐：center
右对齐：flex-end
盒子模型举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box {
height: 120px;
width: 100%;
border: 1px black solid;
/* 把外层设置为盒子 盒子模型，是一种弹性布局，可以很好的适配屏幕 */
display: flex;
}
#box>div {
height: 100px;
width: 100px;
border: 1px black solid;
/* 让子层自动适配盒子，那么子层就会上下左右居中分配 */
margin: auto;
}
#box2 {
height: 800px;
width: 800px;
border: 1px black solid;
/* 把外层设置为盒子 */
display: flex;
/* 让盒子里面的子层
左对齐flex-start，
居中对齐：center
右对齐：flex-end
*/
justify-content: center;
/* 当所有子层，累加的高度或宽带，超过了盒子的宽度和高度，默认会挤压
如果你想要超过之后，自动换行wrap
nowrap 不换行，挤压，默认
wrap-revers 反向换行
*/
flex-wrap: wrap-reverse;
}
#box2>div {
height: 100px;
width: 100px;
border: 1px black solid;
margin-left: 20px;
margin-top: 20px;
}
#box3 {
margin-top: 20px;
height: 800px;
width: 800px;
border: 1px black solid;
/* 把外层设置为盒子 */
display: flex;
justify-content: center;
/* 可以让盒子里面的子层，纵向排列或横向排列，默认是左对齐的横向排列
row 子层横向排列 默认值
row-reverse 横向反转排列
colum 纵向排列
column-reverse 纵向反转排列
*/
flex-direction:row;
}
#box3>div {
height: 100px;
width: 100px;
border: 1px black solid;
margin: auto;
}
#nei{
display: flex;
}
#nei>div{
height:20px;
width:20px;
border: 1px black solid;
margin: auto;
}
</style>
</head>
<body>
<div id="box">
<div id="nei">
<div class="neison">
</div>
<div class="neison">
</div>
<div class="neison">
</div>
</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<div id="box2">
<div class="mydiv"></div>
<div class="mydiv"></div>
<div class="mydiv"></div>
<div class="mydiv"></div>
<div class="mydiv"></div>
<div class="mydiv"></div>
<div class="mydiv"></div>
<div class="mydiv"></div>
<div class="mydiv"></div>
<div class="mydiv"></div>
</div>
<div id="box3">
<div class="mydiv" style="order: 7;">1</div>
<!-- order: 4; order可以调整子层在盒子里面的排列顺序 -->
<div class="mydiv" style="order: 4;">2</div>
<div class="mydiv" style="order: 5;">3</div>
<div class="mydiv" style="order: 6;">4</div>
<div class="mydiv" style="order: 2;">5</div>
<div class="mydiv" style="order: 5;">6</div>
<div class="mydiv" style="order: 1;">7</div>
</div>
</body>
</html>
扫一扫
996
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
