一、概念
Cascading Style Sheets : 层叠样式表。
CSS原理 : 把属性从标签中分离，来单独控制页面元素的样式。
HTML原理：用标签来封装数据，用属性控制样式。
HTML提供标签封装数据，CSS提供属性控制样式。
CSS优点 :
- 1.提供更丰富，更精准的样式。
- 2.标签和属性分离，方便样式的复用。
- 3.实现页面元素的的任意布局。
- 4.更好兼容性。
二、CSS和HTML结合的方式
<!--结合方式1：行内样式表： 通过标签的style属性 style属性的值是css代码--缺点：样式在标签中 无法复用-->
<div style="border:1px solid blue;color:red;font-size:30px;width:200px;">div——1</div>
<!--结合方式2：内部样式表: 通过head的style子标签；缺点：不能跨页面-->
<style type="text/css">
span{ /*css注释 span是标签选择器：指定样式要作用于那个/那些标签上*/
border:1px solid red;
color:blue;
width:300px;
}
</style>
<span id="span_1">span-1</span><br/><!--行标签：无任何自带效果 必须和css结合--> <span id="span_2">span-1222</span><br/>
<span id="span_3">span-133333</span><br/>
CSS文件：p.css
p{
border:1px solid blue;
color:yellow;
font-size:20px;
width:400px;
padding:30px;
}
html代码:
<p>p标签11</p>
<p>p标签1122</p>
<p>p标签113333</p>
<head>
<!--结合方式3：外部样式表：
把css写成一个css文件 在style标签中通过@import 或者link标签来引入
-->
<style type="text/css">
/*@import url("p.css");*/
</style>
<link type="text/css" rel="stylesheet" href="p.css"/>
<!--link标签的属性：type指定文件的语言格式 rel指定文件的作用 href指定文件的路径-->
<head>
三、选择器 :用于选择样式要作用于哪个/哪些标签上
-
id选择器 : #id值{}
/*id选择器：#id值{} 作用于指定id的标签上 注意：同一个页面元素的id值必须唯一*/ #div_1{ background-color:#aaaaaa;/*设置背景颜色*/ } <!--所有标签都有id class style属性--> <div id="div_1">div_1</div> -
标签选择器 : 标签名{}
/*标签选择器：标签名{} 作用于指定标签名的所有标签上*/ div{ border:1px solid blue;/*设置边框：粗细 样式 颜色*/ } <!--所有标签都有id class style属性--> <div id="div_1">div_1</div> <div id="div_2" class="cla_1">div_222</div> <div id="div_3" class="cla_1">div_333333个个股</div> -
类选择器 : .class值{}
/*类选择器：.class值{} 作用于指定class值的所有标签上*/ .cla_1{ font:bold 28px 隶书; /*设置字体：加粗 大小 名称*/ color:blue;/*设置字体颜色*/ } <div id="div_3" class="cla_1">div_333333个个股</div> <span class="cla_1">span_1111呵呵</span><br/> <span class="cla_1">span_1112</span><br/> -
通配符选择器 : *{}
/*通配符选择器：*{} 作用于与所有标签上*/ *{ letter-spacing:20px;/*设置字符间距*/ } -
组合选择器 : 标签名1,标签名2,…{}
/*组合选择器： selector1,selector2,selector3{} 多个选择器公用一个样式*/ span,.cla_1,p{ background-color:#3399cc; width:600px; } -
派生选择器 : 父标签 子标签{}
/*派生选择器：fuSelector ziSelector{} */ p .cla_2{ /*给p标签下的class=cla_2的子标签添加样式*/ border:1px solid red; background-color:#cc3388; font-size:30px; } <p>p标签1<font class="cla_2">p中的font标签class="cla_2"</font></p> <p>p标签2<font class="cla_2">p中的font标签class="cla_2"</font></p> <p>p标签2<font>p中的font标签</font></p> -
伪类选择器 : :标签名{}
/*伪类选择器 : 唯一可以实现动态效果的选择器,只适用于部分标签 语法 : selector:pseudo-class {property:value;} :link a标签未被访问 :hover 鼠标悬停 :active 点击瞬间 :visited a标签被访问过 :focus 获取输入焦点 :first-letter 第一个字符 selector.class:pseudo-class {property:value;} */ a:link { font-size:28px; color:red; font-weight:bold; text-decoration:underline; } a:visited { font-size:18px; color:green; background-color:#ffffff; text-decoration:none; } a:hover { font-size:25px; color:blue; background-color:#33aa33; text-decoration:none; } #but_1:active,a:active { font-size:22px; color:yellow; background-color:#aaaaaa; text-decoration:line-through; } .cla_1:focus{/*获取输入焦点时设置样式*/ background-color:red; } p:first-letter{/*给p标签中文本内容的第一个字符设置样式*/ font-size:40px; color:red; font-weight:bold; } div:hover{ border:1px solid blue; width:400px; } <body> <a href="../imgs/1.jpg">美女一个</a><br/> <a href="../imgs/2.jpg">美女一个</a><br/> <a href="../imgs/3.jpg">卡通人物</a><br/> <a href="../imgs/4.jpg">卡通人物</a><br/> <input type="button" value="点我" id="but_1"/><br/> <input type="text" name="name" class="cla_1"/><br/> <input type="text" name="name" class="cla_1"/><br/> <p>唯一可以实现动态效果的选择器 只适用于部分标签</p> <div>div_!!!!!!!!!!!!!</div> </body>
四、盒子模型
盒子模型:把html标签比喻成盒子；css是盒子的参数，通过盒子模型比较记忆常用的css属性。
div{
/*大小*/
width:400px; height:100px;
/*边框*/
border:3px solid blue;
border-style:double;
border-top:5px groove red;
/*背景*/
background-color:#aaaaaa;
background-image:url("bg.png");
background-repeat:no-repeat; /*背景图片平铺方式*/
background-position:center; /*图片小 元素大时 图片的位置*/
/*字体*/
font:bold 20px 隶书;
letter-spacing:10px;/*字符间距*/
word-break:break-all;/*自动换行*/
text-decoration:underline;/*设置划线*/
text-indent:100px;/*首字符缩进*/
text-align:left;/*文本对齐方式*/
/*边距*/
/*padding:内边距：边框与数据之间的距离, margin:外边距：相邻元素边框之间的距离*/
padding:30px;/*上下左右30px*/
padding:30px 10px;/*上下30px 左右10px*/
padding:20px 40px 60px 80px;/*上右下左*/
margin:20px 30px 40px 80px;
}
<body>
<div>div_111111</div>
<div>div_11111122222222指纹支付</div>
<div>div_111111333333333333指纹支付</div>
<div>div_11111144444444444444444444444444444444444444444444指纹支付</div>
</body>
五、布局
1.浮动
实现页面元素布局1：浮动
float：left/right；
clear：both；
默认情况下，元素以文档流的形式排列：从上到下排列。
-
float：left；
作用1：当前元素排在尽可能的左边。
作用2：后面紧挨的元素排在当前元素右边。
-
float：right；
作用1：当前元素排在尽可能的右边。
作用2：后面紧挨的元素排在当前元素左边。
-
clear：left/right/both
作用：取消上一个元素的float命令。
-
注意1：当上一个元素设置float属性，下一个元素必须设置float/clear属性。
-
注意2：通过float+margin实现页面元素布局。
div{ border:1px solid blue; word-break:break-all; width:200px; min-height:100px; padding:10px; margin:20px; } #div_1{ background-color:#aaaa33; } #div_2{ background-color:#33aa33; } #div_3{ background-color:#aa33aa; } #div_4{ background-color:#33ccaa; } #div_1{ float:left; } #div_2{ float:right; } #div_3{ clear:both; float:left; } #div_4{ float:left; } <body> <div id="div_1">div_111111</div> <div id="div_2">div_122221</div> <div id="div_3">div_133333111</div> <div id="div_4">div_1111114444</div> <body> ```
<div style="width:600px;">
<img src="../imgs/1.jpg" style="width:300px; float:right;" />
默认情况下 元素以文档流的形式排列：从上到下
默认情况下 元素以文档流的形式排列：从上到下排列默认情况下 元素以文档
形式排列：从上到下排列默认情况下 元素以文档流的形式排列：从上到下排列
形式排列：从上到下排列默认情况下 元素以文档流的形式排列：从上到下排列
形式排列：从上到下排列默认情况下 元素以文档流的形式排列：从上到下排列
默认情况下 元素以文档流的形式排列：从上到下排列默认情况下 元素以文档
形式排列：从上到下排列默认情况下 元素以文档流的形式排列：从上到下排列
形式排列：从上到下排列默认情况下 元素以文档流的形式排列：从上到下排列
形式排列：从上到下排列默认情况下 元素以文档流的形式排列：从上到下排列
</div>
2.定位
/*实现页面元素布局2：定位
position: absolute(绝对定位)|relative(相对定位)
top|bottom ：设置垂直位置
left|right ：设置水平位置
*/
body{
border:1px solid blue;
padding:0px;
}
div{
border:1px solid blue;
word-break:break-all;
width:200px;
min-height:80px;
padding:10px;
margin:20px;
}
#div_1{
background-color:#aaaa33;
}
#div_2{
background-color:#33aa33;
}
#div_3{
background-color:#aa33aa;
}
#div_4{
background-color:#33ccaa;
}
#div_1{
position:absolute;/*绝对等位*/
top:100px;
left:100px;
/*
绝对定位:相对的元素：：如果父标签没有设置position属性 相对于body
如果父标签设置position属性 相对于此父标签
注意：文档流中不再保留此元素的位置
*/
}
#div_3{
position:relative;/*相对等位*/
top:200px;
right:-100px;
/*
相对定位： 相对的位置：当前元素在文档流中本类的位置
注意： 文档流中保留此元素的位置
*/
}
效果图:
定位练习:
<html>
<head>
<title>布局：定位</title><!--设置标题-->
<meta charset="UTF-8"/> <!--设置编码集-->
</head>
<body>
<hr/>
<div style="width:600px; height:400px;margin:100px;
border:1px solid blue;margin:10px;">
<img src="../imgs/3.jpg"
style="width:600px; height:400px;"/>
<font style="font-size:70px; letter-spacing:70px;
font-weight:bold;color:red;
position:relative; top:-240px;left:180px;">动画片</font>
</div>
</body>
</html>
效果图:
六、优先级
<html>
<head>
<title>选择器优先级</title><!--设置标题-->
<meta charset="UTF-8"/> <!--设置编码集-->
<style type="text/css">
/*
多个样式可以作用的同一个元素上
属性不冲突 样式叠加
行内样式表(style属性) > id选择器 > 类选择器 > 标签选择器 > 通配符选择器
*/
div{
border:1px solid blue;
background-color:#aa33aa;
}
#div_1{
color:blue;
background-color:#33aa33;
}
*{
background-color:#999999;
}
.cla_1{
background-color:#aaaaaa;
}
</style>
</head>
<body>
<hr/>
<div id="div_1" style="background-color:#ffffff;">
id="div_1" class="cla_1"</div>
<div id="div_1" class="cla_1"> id="div_1" class="cla_1"</div>
<div class="cla_1"> class="cla_1"</div>
<div>div</div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
