上一篇文章已概述了 前端的组成以及前端常用的 html标签
那这篇文章就只讨论 CSS。
众所周知如果拿html和房子作比较的话 :html相当于 房子的基本骨架 没有瓷砖和粉刷修饰 , 就显得很单调,而 CSS就完美的解决了html的单调, 让页面更好看。
好的 , 那接下来步入正题吧
CSS简介:
层叠样式表
层叠样式表(Cascading Style Sheets,缩写为 CSS)是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言)文档的呈现。
作用:给页面排版写样式.W3C要求内容和样式分离.html专门负责展示内容, css专门负责排版.后缀名:.css
页面引入CSS的方式 :
如果给一个地方设置多种样式,谁最后执行就显示谁的样式.(就近原则)
行内css :(不推荐)
直接在标签中用style属性写样式.(不提倡使用)
优点:使用方法
. 缺点:不能实现样式利用;违反W3C规范
.
<!--行内css--> <h1 style="color: red;">我是中国人</h1>
内部css:(不推荐)
在<head>标签中写css
.
优点:可以实现页面内样式利用;符合W3C规范
缺点:不能实现页面间样式利用;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>页面引入css的方式</title> <!--内部css--> <style type="text/css"> h2{ color: blue; } </style> </head> <body> <h2>good good study,day day up</h2> </body> </html>
外部css:(推荐)
创建一个外部css文件写css代码,哪个页面想使用这个css样式就引入.
优点:可以实现页面间样式利用;符合W3C规范;
缺点:要单独写文件.
css
h3{ color: green; }
html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>页面引入css的方式</title> <!--内部css--> <style type="text/css"> h2{ color: blue; } </style> <!--引入外部css--> <link rel="stylesheet" href="css/1.css" /> </head> <body> <!--行内css--> <h1 style="color: red;">我是中国人</h1> <h2>good good study,day day up</h2> <h2>今天天气不错</h2> <h3>dfieiiedfa吃了没?</h3> </body> </html>
导入外部css:(了解)
创建一个外部css文件写css代码,哪个页面想使用这个css样式就在<head>标签中导入.
特点:运行时先加载当前html页面,再加载导入css样式.
<!--导入外部css--> <style type="text/css"> @import url("css/test.css"); </style>
外部CSS 对比 导入CSS
-
浏览器支持性不同:所有浏览器支持外部css;只有部分浏览器支持导入css.
-
加载时间不同:外部css和当前html页面合二为一,一起加载;
导入css是先加载当前html页面,再加载导入的css;
-
js支持性不同:外部css支持用javaScript代码动态修改; 导入css不支持javaScript代码动态修改;
css的语法总结
选择器{ 样式属性名1:值1; 样式属性名2:值2; ... }
注释:
给代码写解释说明.
/*注释的内容*/
选择器:
优先级:id选择器>类选择器>标签选择
标签选择器:
直接以html标签作为选择器,选中页面上这一类标签.
/*标签选择器*/ h1{ color: red; }
类选择器
给想要设置样式的地方用class="类名"取类名,
.类名表示选中这一类标签.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选择器的使用</title> <!--内部css--> <style type="text/css"> /*标签选择器*/ h1{ color: red; } /*类选择器*/ .a1{ color: orange; } </style> </head> <body> <h1>学知识的过程:</h1> <!--给标签取类名--> <h2 class="a1 a2 a3">知道有这个知识存在</h2> <h2 class="a1">这个知识做什么用的</h2> <h2>这个知识怎么用的</h2> <h2>这个知识用在什么地方</h2> </body> </html>
id选择器:
给标签用id="id名"取id名,用#id名表示选中这个标签.
注意:在一个 HTML 文档中,ID 选择器会使用一次,而且仅一次。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选择器的使用</title> <!--内部css--> <style type="text/css"> #d1{ color: purple; } </style> </head> <body> <!--给标签取id名--> <div id="d1"> 大家好 </div> </body> </html>
通配选择器(全局选择器):
*表示选整个页面上所有标签.
/*全局选择器*/ *{ background-color: greenyellow; }
子选择器:
表示选中指定标签中另一类标签(只管儿子这一代).选择器间用>分隔
/*子选择器*/ ul>span{ color: pink; }
后代选择器:
表示选中指定标签中所有另一类标签.选择器间用空格分隔
/*后代选择器*/ ul span{ color: pink; }
群组选择器:
用多种不同方式选中标签,设置相同样式.选择器间用逗号分隔
/*群组选择器*/ div,.a1,#d4{ color: red; }
属性选择器:
表示选中的标签指定属性特征.选择器[属性名]
/*属性选择器*/ h2[class$="a2"]{ color: red; }
nth-child(n) 选择器:
规定属于其父元素的第二个子元素的每个 p 的背景色:
n 可以是一个数字,一个关键字,或者一个公式
p:nth-child(2) { background:#ff0000; }
超链接伪类样式
未访问的链接
a:link { color: #FF0000; }
已访问的链接
a:visited { color: #00FF00; }
鼠标悬停链接
a:hover { color: #FF00FF; }
已选择的链接
a:active { color: #0000FF; }
CSS中常用样式
字体样式
color字体颜色; font-size字体大小; font-weight 字体的粗细。 font-family 字体的类型,eg:"宋体" font-style 字体倾斜 font:倾斜 粗细 大小/行高 类型;
<html> <head> <meta charset="UTF-8"> <title>2.css中常用样式属性</title> <!--内部css--> <style type="text/css"> #d1{ /*字体颜色*/ color: red; /*字体大小*/ /*font-size: 30px;*/ /*粗细*/ /*font-weight: bolder;*/ /*倾斜*/ /*font-style: italic;*/ /*类型*/ /*font-family:"楷体";*/ font:italic bolder 30px "楷体"; } </style> </head> <body> <div id="d1">Hello world</div> <div>非常好,一起学Java</div> </body> </html>
文本样式
text-align 文本水平对齐 text-decoration 文本修饰 line-height 行高 letter-spacing 字符间距 text-indent 首选缩进
.c2{ /*水平居中 text-align: center;*/ /*文本修饰 text-decoration: underline;*/ /*行高*/ line-height: 100px; /*首选缩进*/ text-indent: 50px; /*字符间距*/ letter-spacing: 10px; } /*去掉超链接下划线*/ a{ text-decoration: none; }
背景样式
注意:
-
因为背景图片会将背景颜色覆盖,所以一般情况不用给同一个地方同时设置背景颜色和背景图片.
-
顺斜杠:/,它表示网络路径;反斜杠:\,它表示window路径;
-
图片标签的路径中顺斜杠和反斜杠都可用
-
背景图片的路径中只认顺斜杠.
综上所述:以后无特殊情况只要是路径全用顺斜杠.
background-color 背景颜色 background-image:url(图片相对路径); background-repeat 背景平铺方式 background: 背景颜色 url(背景图片) 平铺方式;
body{ /*背景颜色 background-color: red;*/ /*背景图片 background-image: url("img/gameBg2.jpg");*/ /*背景平铺方式 background-repeat: no-repeat;*/ /*背景总样式*/ background: red url(img\gameBg2.jpg) repeat; }
列表样式
list-style 列表样式 list-style-type 列表类型(样式) list-style-image 列表图片 list-style-position 列表图片或图片的位置
li{ /*边框线*/ border: solid 1px red; /*列表类型*/ /*list-style: none;去掉列图标*/ list-style-type:decimal; /*列表图片:在同一个地方不要同时设置列表图标和图片*/ list-style-image: url(img/sub-3.gif); /*列表图标或图片位置*/ list-style-position: inside; }
拓展样式
display:none(隐藏)/block(将元素将显示为块级元素)/inline(将元素将显示为行级(内联)元素)
.c3 { width: 300px; height: 60px; border: solid 1px red; display:none; }
文本溢出:overflow: visible(全部显示)|hidden(超出部分隐藏)|croll(超出部分用滚动条展示);
.c3{ width: 300px; height: 60px; border: solid 1px red; /*文本溢出*/ overflow: scroll; } #d4{ width: 300px; height: 50px; /*超过部分隐藏*/ overflow: hidden; } #d4:hover{ /*超过部分全部显示*/ overflow: visible; }
盒子模型
css中将每个标签看作盒子模型. 方位顺序:上右下左 注意:一般情况下,所有标签默认都有内外边距.
边框线border:每个标签都可以设置边框线. 内边距padding:标签内容距离边框线之间距离叫内边距. 外边距margin:标签边框线与周围元素的距离. 盒子模型的宽度=元素宽度+左右内边距+左右边框线. 盒子模型的高度=元素高度+上下内边距+上下边框线.
注意:盒子模型样式一般用来设置元素与周围元素间距离,能用外边距调整,就不要用内边距.
/*去掉所有标签内外边距*/ *{ margin: 0px; padding: 0px; } /*设置整个模块水平居中,配置模块width属性一起使用*/ margin: 0px auto;
position定位:
static(静态定位,默认),
relative(相对定位),
absolute(绝对定位),
fixed(固定定位).
relative(相对定位):
相对自身原来的位置发生偏移,元素没有脱离标准文档流,还是占着原来的位置,不影响周围元素. 作用:微调元素距离.
/*相对定位*/ position: relative; left: -150px; top:-100px;
absolute(绝对定位):
绝对定位相对设置了position的父标签来定位的,如果当前元素所有父标签没有设置position,相对于浏览器容器左上角(原点)定位.绝对定位的元素脱离标准的文档流,不占原页面的位置,那么后面元素会受影响. 作用:作二级漂浮菜单.
/*绝对定位*/ position: absolute; top:100px; left: 200px;
fixed(固定定位):
相对浏览器窗口定位.配合设置元素层次的属性一起使用. z-index:
数字(层次);0层是当前标准html页面,大于0层. 作用:作流氓广告.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3.定位</title> <!--内部css--> <style type="text/css"> /*去掉内外边距*/ *{ margin: 0px; padding: 0px; } #container{ width: 500px; height: 2600px; border: solid 1px black; margin: 0px auto; } #d1,#d2,#d3{ width: 400px; height: 100px; margin-top: 50px; margin-left: 50px; } #d1{ border: solid 1px green; } #d2{ border: solid 1px red; /*相对定位 position: relative; left: -150px; top:-100px;*/ /*绝对定位 position: absolute; top:100px; left: 200px;*/ } #d3{ border: solid 1px blue; } #img4{ /*固定定位*/ position: fixed; left: 400px; top: 200px; /*设置元素层次*/ z-index: 1; } #img5{ /*固定定位*/ position: fixed; left: 886px; top: 200px; /*设置元素层次*/ z-index: 2; } </style> </head> <body> <img id="img4" src="img/img-3.jpg"/> <a href="http://www.4399.com"><img id="img5" src="img/x.jpg"/></a> <div id="container"> <div id="d1">111</div> <div id="d2">222</div> <div id="d3">333</div> </div> </body> </html>
浮动(float):
让块级元素变成行级元素.注意:浮动元素会影响后面紧跟着的元素. 后面元素不想受影响,要用
clear
:left
/right
/both
;
float
:left
/right
;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>4.浮动</title> <!--内部css--> <style type="text/css"> /*去掉所有标签内外边距*/ *{ margin: 0px; padding: 0px; } ul{ width:1000px; height: 50px; background-color: #FF0000; /*整体水平居中*/ margin: 0px auto; } li{ /*去掉列表项图标*/ list-style: none; width: 100px; height: 50px; line-height: 50px; text-align: center; /*浮动*/ float: left; } li:hover{ background-color: darkred; } p{ /*清除浮动*/ clear: both; } </style> </head> <body> <ul> <li>首页</li> <li>家用电器</li> <li>手机数码</li> <li>服饰</li> <li>日用百货</li> <li>美妆</li> <p>这是一个p标签</p> </ul> </body> </html>
CSS布局:(重点)
整体布局:div
+css
导航条/左右侧菜单:div
+ul
-li
+css
图文混排:div
+dl
-dt
-dd
+css
规整表单:form
+table
文本水平居中:text-align:center
; 文本垂直居中:line-height
模块水平居中:margin:0px auto
;配置width
属性一起设置. 微调元素位置,首选外边距,其次内边距,最后才会考虑相对定位. 如果一行既有文字又有图片,文字想与图片垂直居中对齐,设置图片的vertical-align: middle
;
以上九点是完成一个静态页面的重要要素 , 如果掌握了这九点要素 ,我相信前端对于你来说是易入反掌 ,
总结
1.div和span标签.(重点) 2.框架集 3.内联框架(重点) 4.特殊符号 5.css概念 6.页面引入css方式.
7.css总语法(重点) 8.css注释 9.8种常用选择器
10.超链接伪类样式4种. 11.常用字体样式5种 12.常用文本样式5种 13.常用背景样式3种 14.常用列表样式4种 15.扩展display,overflow 16.盒子模型 17.定位四种 18.浮动和清除浮动
参考文档:
具体参考文档
座右铭
万丈高楼平地起,多点技术,多粒米。
联系方式
-
QQ : 2958534395
-
GitHub: https://github.com/luoyerr
-
Gitee: 刘杨 (luoyerr) - Gitee.com
感谢您阅读我的博客!如果您对其中的内容有任何疑问、想法或意见,欢迎在评论区留言或通过上述联系方式与我交流。