CSS学习笔记
1.css概念
层叠样式表
作用：
给网页进行样式对的开发
给网页进行布局
特点：
语言特别简单
开发的样式可以重复使用
2.使用css
（1）css的声明
在head标签中使用style声明：
作用：此声明一般声明当前网页的公共样式或者给某个标签的单独样式
<style type="text/css"> hr{ width:50%; height:20px; color:red; background-color:red; } </style>
在标签上使用style属性进行声明：
作用：此声明会将css样式直接作用于当前标签
在head标签中使用link标签引入外部声明好的css文件
作用：此声明相当于调用,解决了不同网页间样式重复使用的问题
<link rel="stylesheet" type="text/css" href="css/my.css"/>
优先级：
如果css的声明全部在head标签中，则遵循就近原则，谁离标签近，谁就会被显示
（2）css的选择器
标签选择器：
标签名{样式名1:样式值1;......}
作用：会将当前网页内的所有标签增加相同的样式
id选择器：
#标签的id属性值{样式名1:样式值1;......}
作用：给某个指定的标签添加指定的样式
类选择器：
.类选择器名{样式名1:样式值1;......}
作用：给不同的标签添加相同的样式
全部选择选择器：
*{样式名1:样式值1;......}
作用：选择所有的HTML标签,并添加相同的样式
组合选择器：
选择器1,选择器2{样式名1:样式值1;......}
作用：选择不同的选择器之间重复样式的问题
字标签选择器：
选择器1 子标签选择器{样式名1:样式值1;......}
属性选择器：
标签名【属性名=属性值】{样式名1:样式值1;......}
作用：选择某标签指定具备某属性并且属性值为某属性值的标签
css的使用过程：
声明css代码域
使用选择器选择要添加样式的标签
使用*选择器来给整个页面添加基础样式
使用类选择器给不同的标签添加基础样式
使用标签选择器给某类标签添加基础样式
使用id、属性选择器、style属性声明方式给某个标签添加个性化样式
书写演示单
边框设置
border:solid 1px;
字体设置
font-size:10px;设置字体大小
font-family:"黑体";(设置字体的格式)
font-weight:bold;设置字体加粗
字体颜色设置
color:颜色;
背景颜色设置
background-color:颜色;
背景图片设置
background-img:url(图片的相对路径);
background-repeat: no-repeat;设置图片不重复
background-size:cover;图片平铺整个页面
高和宽设置
浮动设置
float:left/right
行高设置
line-height:10
（3）css的常用样式
tr{ width:100px;/*设置宽*/ border: solid 1px red;/*添加边框及其颜色和大小*/ border-radius:10px;/*设置表框的角度*/ background-color:orange;/*设置背景颜色*/ text-align:center;/*设置文本颜色*/ color:blue;/*设置文本颜色*/ font-weight:bold;/*设置文本加粗*/ letter-spacing:10px;/*设置字体间距*/ }
/*设置图片样式*/ img{ width: 12%;/*设置高度*/ padding: 10px;/*设置内边距*/ background-color: white;/*设置背景颜色*/ transform: roate(-10deg);/*设置倾斜角度*/ margin: 20px;/*设置外边距*/ } /*使用伪类给标签添加样式*/ img:hover{ transform: rotate(0deg) scale(1.5);/*设置旋转角度和缩放比例*/ z-index: 1;/设置显示优先级 transition: 1.5s;/*设置显示加载时间*/ }
（4）css的盒子模型
div标签：
块级标签：主要是用来进行网页布局，会将其中的子元素内容作为一个独立的整体存在
特点：
默认宽度是页面的宽度，但是可以设置
高度默认是没有的，但是可以设置
如果子元素设置了百分比的高或宽，占据的是div的百分比，不是页面
盒子模型：
外边距：margin
作用：用于设置元素和元素之间的间距
居中设置：margin: 0px auto;上下间隔0px，水平居中
可以根据需求单独设置上下左右外边距
边框：border
作用：用来设置元素的边框大小
可以单独设置上下左右
外边距：padding
作用：设置内容和边框之间的距离
注意：内边距不会改变内容区域的大小
可以单独的设置上下左右的内边距
内容区域：
作用：改变内容区域的大小
设置宽和高即可改变内容区域的大小
<html> <head> <title>盒子模型的简单布局</title> <style type="text/css"> /*设置div的基础样式*/ div{ width: 300px; height: 300px; } /*设置header和footer的样式*/ #header,#footer{ width: 650px; margin-top: 20px; margin:0px,auto; } /*设置子div的样式*/ #div01{ border: solid 1px orange; float:left; margin-right: 20px; } #div02{ border: solid 1px blueviolet; float:left; } #div03{ border: solid 1px #4791FF; float:left; margin-right: 20px; } #div04{ border: solid 1px coral; float:left; } </style> </head> <body> <div id="header"> <div id="div01"> ... </div> <div id="div02"> ... </div> </div> <div id="fotter"> <div id="div03"> ... </div> <div id="div04"> ... </div> </div> </body> </html>
(5)css的定位
position
相对定位：relative
作用：相对元素原有位置移动指定的距离
可以使用top,left,right,bottom来进行设置
注意：
其他元素的位置是不改变的
绝对定位：absolute
作用：可以使用元素参照界面或者父元素来进行移动
注意：
如果父级元素成为参照元素，必须使用相对定位属性
默任情况下是以界面为基准进行移动的
固定定位：fixed
作用：将元素固定显示在页面指定位置，不会随着滚动条的移动而改变位置
以上定位都是以使用top,left,right,bottom，来进行移动
z-index:此属性是用来声明元素的显示级别
3.模拟百度首页
（1）首先使用css+div进行页面的布局
（2）使用HTML进行每一个块中的内容填充
<html> <head> <title>百度首页模拟</title> <meta charset="UTF-8"/> <style type="text/css"> <!--设置界面的基础样式--> *{margin: 0px;padding: 0px;} <!--设置header头部分的大小--> #header{width: 100%;height: 45px;} <!--设置导航栏样式--> #header_nav{position :absolute;right:92px;top: 25px;} #header_nav li{float: left;list-style-type: none;margin-left: 20px;} #header_nav li a{color: #333;font-size: 13px;font-weight: 700;line-height: 24px;} <!--设置main头部分的大小--> #main{width: 100%;height: 384px;text-align: center;margin-top: 21px;} #img_logo{margin-top: 30px;} <!--设置搜索框样式--> input[type=text]{height: 34px;width: 539px;border: solid 1px #4992FF;background-image: url();background-repeat: no-repeat; background-position-x: 500px;background-position-y: 3px;} input[type=submit]{height: 34px;width: 100px;font-size: 15px; color: #fff;background-color: #2d78f4;border: solid;letter-spacing:1px;position: relative;right: 5px;top:1px;} <!--设置footer头部分的大小--> #footer{width: 100%;height: 206px;text-align: center;} </style> <!--引入网页标题图片--> <link href="" rel="shortcut icon"/> </head> <body> <!--声明头部--> <div id="header"> <!--声明导航栏--> <ul id="header_nav"> <li><a href="">新闻</a></li> <li><a href=""></a>hao123</li> <li><a href=""></a>地图</li> <li><a href=""></a>视频</li> <li><a href=""></a>贴吧</li> <li><a href=""></a>学术</li> <li><a href=""></a>登陆</li> <li><a href=""></a>设置</li> </ul> </div> <!--声明主体--> <div id="main"> <!--引入百度logo--> <img id="img_logo" src="" width="270px" height="129px"/><br> <!--声明搜索框和按钮--> <input type="text" name="" id="" value=""/> <input type="submit" name="" id="" value="百度一下"/> </div> <!--声明底部--> <div id="footer"> <!--声明网站声明内容--> <img src=""/><br> </div> </body> </html>
