一、 Css概念
作用
1、作用:用来控制我们HTML标签的展示样式,使得标签的样式展示的更加丰富,就是用来解耦的
我们学习了CSS以后 尽量不使用 HTML标签自带的属性 全部用CSS 去设置
层叠性:多个多个样式控制一个标签,这几个样式对一个标签同时生效
2、CSS 跟HTML 配合使用的方式
方式1:内联样式: 将CSS 代码写在标签上 所有的标签都会有一个 style属性
我们的CSS代码 就可以写在 style 属性里面
每个CSS样式 写法 属性名:属性值;属性名2:属性值2;属性3:属性值3
举例: 这段文字的样式
内联样式的写法:只能控制单个标签,且书写凌乱,不推荐使用.
3、内部方式:将style属性写在标签内部 常用
4、外联样式:CSS样式写在一个单独文件中 这种方式常用
二、 两个纯净标签介绍
1、div标签
div 标签是一个纯净的块标签
，所谓的纯净，就是这个标签，不带有任何样式（没有宽高，没有背景等）
块标签：这个标签会默认占据一行
行标签：不会占据一行
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
div 标签是一个纯净的块标签，所谓的纯净，就是这个标签，不带有任何样式（没有宽高，没有背景等）
块标签：这个标签会默认占据一行
行标签：不会占据一行
-->
<b>加粗</b> <b>加粗2</b> <h1>标题标签</h1><b>加粗2</b>
<ul>
<li>列表标签</li>
</ul>
<ol>
<li>asdfasfd</li>
</ol>
<table border="1" cellspacing="" cellpadding="" width="200px" height="200px">
<tr><th>Header</th></tr>
<tr><td>Data</td></tr>
</table>
<font size="" color="">asdfasdfasd</font>
<div id="" style="font-size: 100mm;color: aqua;">
abc
</div>
<a href="#">asdfasdf</a><a href="#">asdfasdf</a>
</body>
</html>
span标签
纯净的行标签
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- span 纯净的行标签 所谓的纯净，就是不带有任何样式 -->
<s>abc</s>
<span style="text-decoration: line-through;">纯净的行标签</span>
</body>
</html>
三、 选择器
1、id选择器
选择器：用来选择一个或多个标签，进行样式的控制，为了提高CSS代码的复用性
id选择器：一次选择一个标签
class 选择器：一次可以选择多个标签
标签选择器：一次可以选择多个标签
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1,#div2{
height: 300px;
width: 300px;
border: 2px blue solid;
background-color: pink;
}
</style>
</head>
<body>
<div id="div1">
</div>
<div id="div2">
</div>
</body>
</html>
2、标签选择器
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div,h1{
color: #0000FF;
font-size: 19mm;
}
</style>
</head>
<body>
<div id="">
asdfasdf
</div>
<h1>阿斯顿发顺丰大</h1>
<h2>asdfasdfasdf</h2>
<ul>
<li>asdfasdfasfasd</li>
</ul>
</body>
</html>
3、class选择器
在每个块标签内，定义一个class=“myclass”
在class选择器用.myclass调用
注意：最主要用法是，在有多个相同属性时，就用class标签
案例演示：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.myclass{
color: #FFC0CB;
font-size: 150px;
font-family: 楷体;
}
#div1{
color: aqua;
}
</style>
</head>
<body>
<div id="div1" class="myclass">
aaaaaa
</div>
<h1 class="myclass">bbbb</h1>
<ul class="myclass">
<li>cccc</li>
</ul>
<ol class="myclass">
<li>dddd</li>
</ol>
</body>
</html>
4、属性选择器
不常用，但是了解
用[ ]调用
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
font-family:微软雅黑;
background: #FFC0CB;
}
[id]{
color: red;
}
div[id]{
color: #0000FF;
}
h1[id]{
color: yellow;
}
div[id=div1]{
color:deepskyblue;
}
</style>
</head>
<body>
<div id="div1">
一行文字
</div>
<div id="div2">
一行文字
</div>
<h1 id="myh">asdfasdfsf</h1>
</body>
</html>
5、后代选择器
格式：#div1 div div{
color:yellow;
例如：
</div>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div11 div div{
color:green;
}
li{
color: #0000FF;
}
ul li{
color: #FFFF00;
}
</style>
<div id="div11">
爷爷2
<div id="div222">
爸爸2
<div id="div33">
孙子2
</div>
</div>
</div>
6、相邻选择器
h1 +h2{ //相邻一个
color: red;
}
h1 ~h2{ /* 相邻所有*/
color: red;
}
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h1 ~h2{ /* 相邻所有*/
color: red;
}
</style>
</head>
<body>
<h1>asdfasb</h1>
<h2>2222222222222222222222</h2>
<h2>2222222222222222222222</h2>
<h2>2222222222222222222222</h2>
<h2>2222222222222222222222</h2>
</body>
</html>
7、伪类选择器
很重要
可以用于网页按钮上，在访问前后的颜色设置，以及背景颜色改变等等
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 链接状态 */
a:link{
color: #FF0000;
}
/* 鼠标悬浮状态 */
a:hover{
color: palegreen;
}
/* 按下鼠标的状态 */
a:active{
color: #FFFF00;
}
/* 访问过后的状态 */
a:visited{
color: plum;
}
</style>
</head>
<body>
<a href="index.html">跳到首页</a>
<a href="index.html">跳到首页</a>
<a href="index.html">跳到首页</a>
<a href="index.html">跳到首页</a>
<a href="index.html">跳到首页</a>
<a href="index.html">跳到首页</a>
<a href="index.html">跳到首页</a>
</body>
</html>
四、 选择器的优先级
选择器的优先级。就是为了解决，多个选择器，出现属性控制冲突时，听谁的
内联样式>id选择器>class选择器>标签名选择
五、 常用属性列举
top:80px;//距顶部距离
left:35px;//距左距离
width:20px//宽度
height:20px//高度
font-family:楷体;
font-size:14pt;
color:blue; //层里面的字体颜色
overflow:scroll/visible/hidden/auto //超出内容是否包裹
float: right; //浮动到哪个位置设置left或right层为左右排列默认是上下排列
clear:both/left/right/none; //属性规定元素的哪一侧不允许其他浮动元素。一般用于使用float后无法换行，给两个控件中间夹一个空层设置style=“clear:both;”
background: #99FFcc;//层的背景颜色
background-image:url(‘top.jpg’);为层设置背景图片
display:block/none/inline //显示为块 隐藏 显示为行
visibility:visible//显示元素
visibility:hidden//隐藏元素
border:2px solid #f98510;//边框的宽度和样式以及颜色
z-index:2;// 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。Z-index 仅能在定位元素上奏效（例如 position:absolute;）
position:absolute(绝对)/relative(相对);//属性规定元素的定位类型。
transform:rotate(30deg);//旋转 scale(2,2);//缩放 translate(30px,20px);//位移
border-radius:20px;//边框圆角
border-image:url(border.png) 30 30 round;//边框图片 大小模式
box-shadow: 10px 10px 5px #888888;//添加阴影
//轮廓
outline:#00ff00 dotted thick;
//鼠标显示相关
cursor:auto/crosshair/default/pointer/move/e-resize/ne-resize/nw-resize/n-resize/wait/text/help
cursor:url(’’),default;
六、 补充的属性
<input type="text" list="mydata" placeholder="请输入邮箱"/>
<datalist id="mydata">
<option label="第一个">xxx@qq.com
<option label="第二个">xxx@163.com
<option label="第三个">xxx@gmail.com
<option label="第四个">xxx@139.com
</datalist>
垂直对齐属性
vertical-align:text-top/middle
可设置的值有以下
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
opacity:0.0; 透明度
display:block/none/inline //显示为块 隐藏 显示为行
visibility:visible//显示元素
visibility:hidden//隐藏元素 但会占位置
轮廓
outline:#00ff00 dotted thick;
轮廓外边距
outline: 2px solid red;
outline-offset: 10px;
鼠标显示相关
cursor:auto/crosshair/default/pointer/move/e-resize/ne-resize/nw-resize/n-resize/wait/text/help
cursor:url(’’),default;//自定义一个鼠标图片
z-index:2;// 属性设置元素的堆叠顺序。
七、 框架标签的属性、
一、frameset
注意 frameset 标签不能和body标签共存
- 属性
①border
设置框架的边框粗细。
②bordercolor
设置框架的边框颜色。
③frameborder
设置是否显示框架边框。设定值只有0、1；0 表示不要边框，1 表示要显示边框。
④cols
纵向分割页面。其数值表示方法有三种：“30%、30（或者30px）、”；数值的个数代表分成的视窗数目且数值之间用“,”隔开。“30%”表示该框架区域占全部浏览器页面区域的30%；“30”表示该区域横向宽度为30像素；“”表示该区域占用余下页面空间。例如：cols=“25%,200,*” 表示将页面分为三部分，左面部分占页面30%，中间横向宽度为200像素，页面余下的作为右面部分。
⑤rows
横向分割页面。数值表示方法与意义与cols相同。
⑥framespacing
设置框架与框架间的保留的空白距离。
- 用例
二、frame
- 属性
①name
设置框架名称。此为必须设置的属性。
②src
设置此框架要显示的网页名称或路径。此为必须设置的属性。
③scrolling
设置是否要显示滚动条。设定值为auto, yes, no。
④bordercolor
设置框架的边框颜色。
⑤frameborder
设置是否显示框架边框。设定值只有0、1；0 表示不要边框，1 表示要显示边框。
⑥noresize
设置框架大小是否能手动调节。
⑦marginwidth
设置框架边界和其中内容之间的宽度。
⑧marginhight
设置框架边界和其中内容之间的高度。
⑨width
设置框架宽度。
⑩height
设置框架高度。 - 用例
三、iframe
是浮动的框架（frame），其常用属性与frame类似，其他的主要有以下（相同的就不列举了）
- 属性
①align
设置垂直或水平对齐方式
②allowTransparency
设置或获取对象是否可为透明。 - 用例
八、 行标签和块标签的区别
<span>这是一个纯净的行标签asdfasfdasdfasdf</span><span>这是一个纯净的行标签</span>
<h1>这是块标签</h1>
<h1>这是块标签</h1>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
span{
/* height:500px;
width: 300px;
margin-top: 500px;
margin-bottom: 300px; */
margin-left: 200px;
}
h1{
color: red;
height: 500px;
border: 1px black solid;
}
</style>
</head>
<body>
<!-- 行标签，不能设置宽高，以及上下间距 ，他的内容有多宽他就有多宽 设置左右间距有效 -->
</body>
</html>
九 1、页面定位：相对定位
相对定位，设置间距，margin-left margin-top margin-right margin-bottom
button{
position: relative;
}
2、页面定位：绝对定位
页面的左上角，是我们元素的起始位置
第一个元素参照起始位置
页面元素的默认定位方式，采用的是相对定位，一个元素的位置会参照上一个元素的位置
绝对定位：元素之间，不存在参照关系，所有 元素只参照起始位置
元素设为了绝对定位后，设置元素距离起始位置的属性
button{
position:absolute;/* relative相对定位 absolute绝对定位*/
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
