前端（Css学习） 2
一、初识CSS
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现（的一个应用）或（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
二、CSS的组成
1.语法格式
语法格式: 选择器 { 属性名1 ： 属性值1 ; 属性名2 : 属性值2 }
h1{margin-left:20px;margin-top:20px}
div{color:red;font-size:19px} 
使用（引入）：
外部link标签（css 文件 head头部中）
<link rel="stylesheet" type="text/css" href="../Demo211221/css/test.css"/>
小知识点：
<!--
"./":代表目前所在的目录。
"../":代表上一层目录。
"/"开头:代表根目录。
--> 内部style双标签（head 头部中）
<script type="text/javascript"></script> 内联style属性 （body中）
<p style="color: red;font-size: 30px;">我是内联</p> 优先级（针对同一样式属性）
1-就近原则
2-后面样式覆盖前面样式
3-指定的高于继承的
1-就近原则
2-后面样式覆盖前面样式
3-指定的高于继承的
2.选择器
选择器 ：有规律的
属性名 ：固有的
属性值 ：根据属性来定
元素（标签）选择器
属性名 ：固有的
属性值 ：根据属性来定
元素（标签）选择器
<script type="text/javascript">
//对所有h1标签使用同一样式
h1{
background-color: blanchedalmond;
}
</script>
<h1>aaa</h1>
id 选择器 针对某一个标签来用
<script type="text/javascript">
/* id 选择器 针对某一个标签来用*/
#s{
font-size: 20px;
background-color: saddlebrown;
}
</script>
<body>
<div id="s" >三生三世</div>
</body> 类 class 选择器 最方便最智能 可以多个标签一块用(中间用空格)
.s1{
background-color: chartreuse;
}
.s2{
font-size: 20;
font-weight: bold;
}<div class="s1">神雕侠侣</div>
<div class="s2 s1">小李飞刀</div> 属性选择器
/* 属性选择器 */
input[type='text']{}
input[checked]{}
input[class ~='s2']{} /* calss属性中是否有包含S2的 */
input[name ^='name']{} /* name属性是否有以a开头 */
input[name $='name']{} /* name属性是否有以b结尾 */
input[type *='c']{} /* 有没有包含的 */
input[type |='text']{} /* 是否包含减号后面的 */
/* <div class='test-a'></div> */ 上下文(关系/派生)选择器
/* 上下文(关系/派生)选择器 */
ul li{} /* 全部后代 ul下的全部li */
a > img{} /* 相邻后代 <a><img/></a> */
h1 + p{} /* 最近相邻的的兄弟 */
h1 ~p{} /* 之后全部兄弟 */ 伪类选择器
/* 伪类选择器 */
a:hover{color: #00FFFF;} /* 鼠标悬浮到相应位置 改变颜色 */ 分组选择器
/* 分组选择器 */
h2,p,div{} /* h2,p和div 都具有相同样式 */
3.定位
① static 静态定位
② fixed 固定定位
③ relative 相对定位
④ absolute 绝对定位
1 - static 静态定位
<!-- html 标签默认位置，标准dom流 -->
<div >
<span>aaaa</span>
</div>
2- fixed 固定定位
<!-- 参照物：浏览器窗口（left/right+top+bottom） -->
<!-- 脱离dom流 ，不占有空间 -->
<!-- 常用作漂浮广告，返回顶部， 固定头部尾部侧边 -->
<div id="first">AAAA</div>
<div id="second">BBB</div>
3- relative 相对定位
<!-- 参照物 原本自身 ,存在于dom流 ，占有原来空间-->
4- absolute 绝对定位
<!-- 参照物 最近的已定位（fixed / relative /absolute） 父元素 -->
<!-- 若无已定位复原，那么相对于body定位 -->
<!-- 脱离dom流 ，不占有原有空间 -->
<div>
<div style="background-color: red;" class="box"></div>
<div style="background-color: blue;" class="box absolute_box relative_box"></div>
<div style="background-color: #7FFF00;" class="box"></div>
<div style="background-color: coral;" class="box"></div>
</div>
<!-- 一般情况下在绝对定位时使用 -->
z-index （z-index:-1）层叠样式 : 整数无单位，大的在上面，可以是负值4.显示和隐藏
display 不可见
visibility 可见性
<!-- css显示与隐藏 -->
<!-- display -->
<!-- 可以隐藏，不会占用空间 -->
<!-- visibility 可见性-->
<!-- 可以隐藏但仍然占用原有空间 -->
<div style="border: 1px solid #7FFF00;">
<h1>AAAA</h1>
<h1 style="visibility: hidden;">BBBB</h1> <!-- 隐藏内容 -->
<p>CCCC</p>
</div>
<div style="border: 1px solid skyblue;">
<h1>DDDD</h1>
<h1 style="display: none;">EEEE</h1> <!-- 隐藏内容 -->
<p>FFFF</p>
</div>5.居中
水平居中
垂直居中
<!-- 一般情况下在绝对定位时使用 -->
z-index （z-index:-1）层叠样式 : 整数无单位，大的在上面，可以是负值
居中
<!-- 水平居中 -->
<!-- block元素 =margin+width-->
<!-- inline 元素 =父元素+text-align-->
<div class="center_block">aaaa</div>
<div class="center_inline">bbbb</div>
<!-- 垂直居中 -->
<!-- 尺寸固定 -->
<!-- 定位=50% + margin负值 -->
<div class="v_box1"> cccc</div>
<div class="v_box2"> cccc</div>
<!-- 尺寸不固定 -->
<div class="v_box3">
<div class="v_box4">asdasda</div>
</div>
6.div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
</script>
<style type="text/css">
.container{
width: 100%;
border: 1px solid gray;
}
.header,.footer{
background-color: gray;
color: white;
padding: 15px;
font-size: 20px;
clear:left
}
.footer{
font-size: 15px;
}
.content_left{
float: left;
width: 160px;
}
.content_right{
margin-left: 190px;
border-left:1px solid gray ;
padding-left: 25px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
www.baidu.com
</div>
<div class="content_left">
sdaa jssaj kdas asda sdasd asdasasd adasd asdas dasd asdsas adasdasd adasd asdas dasd asdsas adasdasd adasd asdas dasd asdsas adasdasd adasd asdas dasd asdsas adasdasd
</div>
<div class="content_right">
asd adasd asdas dasd asdsas adasdasd adasd asdas dasd asdsas adasdasd adasd asdas dasd asdsas adasdasd adasd asdas dasd asdsas adasdasd
</div>
<div class="footer">
sad asdasd dfsdf sdfs dfs fdsfsd
</div>
</div>
</body>
</html>
展示：
7.盒子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style>
div{
background-color: #00FFFF;
margin: 20px;
}
.c1{
margin:20px 50px 30px 40px;/*上右下左*/
margin:20px 50px 30px; /*上20 左右50 下30*/
margin:20px 50px ;/*上下20 左右50*/
/* 指定四个值，分别设置 上10px，右20px，下30px，左40px，按照顺时针方向；
margin:10px 20px 30px 40px;
指定三个值，第一个值10px设置给上，第二个20px设置给左和右，第三个30px设置给下外边距；
margin:10px 20px 30px;
指定两个值，第一个值10px设置给上下外边距，第二个值20px设置给左右外边距；
margin:10px 20px;
指定一个值，四边外边距使用同一个值，上下左右都是10像素；
margin:10px; */
}
</style>
</head>
<body>
<div >AA</div>
<div >BB</div>
<div >CC</div>
<div >DD</div>
<div >EE</div>
外边距合并
当两个垂直外边距相遇时，形成一个外边距（高度保留较大值）
ps：block 元素可以合并
inlne、浮动、绝对定位都不会合并
<!-- 在默认情况下,所有标签在（普通）文档流（dom流）中显示 -->
<!-- 在普通流中的元素的位置由元素在html中书写位置决定的 -->
<!-- <div>AAA</div> -->
<!-- 浮动的 元素 可以向左或向右移动 -->
<!-- 直到它的边缘碰到包含该元素或者另一个，浮动元素脱离dom流 -->
<!-- 浮动的基本原则: -->
<!-- 1-浮动元素的外边缘不会超过父元素的内边缘 -->
<!-- 2-浮动元素不会相互重叠 -->
<!-- 3-浮动元素不会上下浮动 -->
<!-- 4-如果一个浮动元素再领一个浮动元素之后，而且会超出容纳块则他下降到低于个浮动元素的位置 -->
<!-- 简单来说：没有足够空间就另起一行 -->
<!-- table 过去-->
<!-- div+css 目前-->
<div></div>
<div id="1" style="float: right;border: 1px solid blueviolet ;padding: 15px; ">
<img src="../img/1.jpeg" width="250" height="200"/>
</div>
萨达是煎熬蓝思科技埃里克森加大了开始就搭上了肯德基阿斯利康大家奥斯卡来得及阿斯卡纶的
萨达是煎熬蓝思科技埃里克森加大了开始就搭上了肯德基阿斯利康大家奥斯卡来得及阿斯卡纶的
</div>
</body>
</html>
展示：
8.浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul{
float: left;
list-style-type:none ;
width: 95%;
}
li{
display: inline;/* 内联元素 共用一行*/
}
a{
text-decoration: none;/* 清除超链接下划线 */
background-color: purple;/* 背景颜色 */
color: white;/* 字体颜色 */
width: 100px;
padding: 5px 10px;
border-right: 1px solid white ;
}
a:hover{background-color: #FF3300;} /* 鼠标悬浮效果 */
</style>
</head>
<body>
<ul>
<li><a href="#">link a</a></li>
<li><a href="#">link b</a></li>
<li><a href="#">link c</a></li>
<li><a href="#">link d</a></li>
</ul>
</body>
</html>
展示：
总结
Css可以使的你网页更加好看，选择器真的非常好用。
明天的我，依旧光芒万丈！
If not now, when? If not me, who? “时不我待，舍我其谁。”
浙公网安备 33010602011771号