一.CSS基础
1.CSS介绍
1.1 CSS的使用
CSS:层叠样式表,用来美化网页,使用CSS可以让结构(HTML)与表现(CSS)分离,方便维护。
1.2 基本语法
选择器{
属性:属性值;
}
选择器:通常是要改变的HTML标签
每条声明由一个属性(property)和一个属性值(value)组成。
属性(property)是希望设置的样式属性(style attribute)。
每个属性有一个属性值(value)。 属性和属性值被冒号分开
1.3 CSS 的四种应用方式
1.行嵌样式(行间样式)
<div style="color:olive;width:150px;border:1px solid blue;">行间样式测试1</div>
2.内部样式表
<style type="text/css"> p{ background-color: darkseagreen; font-size: 18px; font-style: italic; } </style>
3.链入外部样式表
先创建style.css文件
<link rel="stylesheet" href="style.css">
4.导入外部样式表
先创建test.css
<style type="text/css"> @import "css/test.css"; </style>
上述四种区别:
行间样式只作用于当前标签,内部样式作用于当前文件,外部样式可以被多个HTML文件引用,实际开发多用外部import和link引入。
import和link的区别 :
1.link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。
2.link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
3.link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
4.link支持使用Javascript控制DOM去改变样式;而@import不支持。
1.4 CSS选择器
通配符选择器匹配HTML中的所有元素。
1)*:匹配HTML中的所有元素(注意: * 性能比较差,需要匹配所有标签,所以在开发时候,不建议使用)
2)标签选择器:用来匹配
3)类选择器:用来选择class命名的标签
4)ID选择器:用来选择用id命名的标签
5)派出选择器:根据上下文确定选择器的标签
6)伪类选择器
7)伪元素选择器
1.5 选择器的分组
让多个选择器(元素)具有相同的样式,一般用于设置公共样式。
1.6 选择器的继承
CSS继承是指被包在内部的标签拥有外部标签的样式性质。CSS的一个主要特征就是继承,它依赖于祖先-后代关系的。继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以用于它的后代。
1.7 优先级
多重样式:如果外部样式、内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况。一般 情况下,优先级如下:(外部样式)<(内部样式)<(内联样式)。
优先权值: 我们把特殊性分为4个等级,每个等级代表一类选择器,每个等级的值为其所代表的选择器的个数乘以这一等 级的权值,最后把所有等级的值相加得出选择器的特殊值。
- !important,加在样式属性值后,权重值为 10000。
- 内联样式,如:style=””,权重值为1000。
- ID选择器,如:#content,权重值为100。
- 类、伪类、伪元素,如:.content、:hover 权重值为10。
- 标签选择器,如:div、p 权重值为1。
2.CSS字体
2.1.font-size:设置字体大小
- 属性值:
-
- number+px:固定值尺寸像素
- number+%:其百分比取值是基于对象中字体的尺寸大小
2.2.font-family:设置字体
- 属性值:
-
- name:字体名称按优先顺序排列,以逗号隔开。如果字体名称包含空格,则应使用引号括起。
p { font-family: Courier, "Courier New", monospace; }
2.3.font-style:设置文字样式
- 属性值:
-
- normal:默认值,正常字体
- italic:斜体,对没有斜体变量的特殊字体,应该使用oblique
- oblique:斜体
2.4.font-weight:加粗
- 属性值:
-
- normal:正常
- bold:粗体
- bolder:比bold粗
- lighter:比normal细
- {100-900}:定义粗到细的字符,400等同于normal,700等同于bold
2.5.line-height:行高,即是字体最底端与字体内部顶端之间的距离
- 属性值:
-
- normal:默认值,默认行高
- number+px:指定行高为像素
- number:指定高为字体大小的倍数
2.6.color:文字的颜色
- 属性值:
-
- name:指定颜色的名字
- rgb:指定颜色的rgb
r:0-255
g:0-255
b:0-255
-
- {颜色的16进制}指定颜色为16进制
以:#开始,后跟6(#rrggbb)为或者3(#rgb)为16进制的数
2.7.text-decoration:设置文字字体的修饰
- 属性值:
-
- none:默认没有修饰
- underline:下划线
- line-through:贯穿线
- overline:上划线
2.8.text-align:文本对齐方式
- 属性值:
-
- left:默认左对齐
- center:居中
- right:右对齐
2.9.text-transform:字母大小写
- 属性值:
-
- none:默认值(无转换)
- capitalize:将第一个字母转换成大写
- uppercase:转换成大写
- lowercase:转换成小写
2.10.text-indent:文本缩进
- 属性值:
-
- {number+px}:首行缩进number像素
- {number}:首行缩进number字符
TIP:
font复合属性:
font:font-style font-variant font-weight font-size/line-height font-family
注意:
-
- 属性值的位置顺序
- 除了font-size 和font-family外其他任何一个属性都可以省略、
- font-variant:文本修饰(normal/small-caps:小写转大写,大写字母变小)
3.CSS背景
3.1 background-color:背景色(transparent/color)
- 属性值:
-
- transparent:背景色设置为透明,相当于取消背景色
3.2 background-image:背景图(none/url)
background-image:url("img/bg.jpg");
3.3 backgroud-repeat:设置背景的铺排方式
- 属性值:
-
- repeat:默认值(图片横向和纵向平铺)
- no-repeat:背景图像不在平铺
- repeat-x:背景仅在横向平铺
- repeat-y:背景仅在纵向平铺
background-repeat: no-repeat;
3.4 background-position:设置对象背景图片位置
{x-number | top | center | bottom } {y-number | left | center | right } :控制背景图片在元素的位置:x轴 、y轴。其铺排方式为no-repeat。
3.5 background-attachment:设置背景图像的滚动位置
- 属性值:
-
- scroll :默认值。背景图像会随着页面其余部分的滚动而移动。
- fixed : 当页面的其余部分滚动时,背景图像不会移动。
3.6 background:设置背景的复合写法。
background:color image repeat attachment position
4.伪类选择器
伪类:专门表示元素的一种特殊状态
常用伪类:选择器
4.1a标签的伪类
a:visited :已被访问状态。
a:link :未访问状态。
a:hover :鼠标悬停状态。
a:active :用户激活。
4.2 表单:focus
:focus表单获得焦点时触发样式
4.3 first-child
:first-child 伪类来选择元素的第一个子元素。
:last-child
:nth-child(number)
<style> a:link{/* 这里的Link可以省略*/ color:red; } a:visited{ color:green; } a:hover{ color:yellow; } a:active{ color:blue; } input:focus{ outline: 1px solid indianred; } ul li:first-child{ color:chartreuse; } ul li:last-child{ color:pink; } ul li:nth-child(3){ color:red; } </style> </head> <body> <a href="#">点击我 挑转 </a><br/> <input type="text"> <ul> <li>aaa</li> <li>aaa</li> <li>aaa</li> <li>aaa</li> </ul> </body>
结果图:
5. CSS 属性和关系选择器
属性选择器可以根据元素的属性及属性值来选择元素。
5.1 CSS属性选择器
[属性名]:包含指定属性名的元素(常用)
[属性名=值]:属性名的值为指定值的元素(常用)
[属性名~=值]:属性的值包含指定值的元素
[属性名^=值]:属性的值以指定值开头的元素
[属性名$=值]:属性的值以指定值结尾的元素
<style> div.content[title]{ font-weight:bold; } input[name=usr]{ background-color:red; } div[class^=content3]{ background-color: #e681ff; } div[class~=box1]{ background-color: #53ffc5; } div[class$=box3]{ background-color: #ff2cef; } </style> </head> <body> <div class="content " title="内容">content1</div> <div class="content">content2</div> <div class="content3">content3</div> <div class="content4 box1 box2">content4</div> <div class="content5 box1 box2 box3">content5</div> <form action=""> <input type="text" name="account"/> <input type="text" name="usr"/> </form>
结果图:
5.2 关系选择器
- 空格:后代选择器(h1下的所有后代strong)
<style> h1 strong{ color:#94ff7e; background-color: #81a4ff; } </style> </head> <body> <h1><strong>关系1</strong><span><strong>关系2</strong></span></h1> </body>
结果图:
- >:只选择儿子元素
<head> <style> h1>strong{ color:#94ff7e; background-color: #81a4ff; } </style> </head> <body> <h1><strong>关系1</strong><span><strong>关系2</strong></span></h1> </body>
结果图:
- +:兄弟选择器
<head> <style> /* 3. 兄弟选择器 */ ul li+li+li{ list-style-type: none; color:#ff2cef; } </style> </head> <body> <ul> <li>li1</li> <li>li2</li> <li>li3</li> <li>li4</li> <li>li5</li> </ul> </body>
结果图:
6. 伪元素
伪元素:用于向某些选择器设置特殊效果。
伪元素与伪类的区别:
CSS引入伪类和伪元素是为了格式化文档树以外的信息,也就是说伪类和伪元素是用来修饰不在文档树的部分。
伪类:用于当已有元素处于某个特定状态的时候,为其添加相应的样式,这个状态是根据用户行为而动态变化。它只有处于dom树无法描述的状态下才能为元素添加样式,所以称之为伪类。
伪元素:用于创建一些不在文档树中的元素,并为之添加样式。比如我们可以通过:before在一个元素添加ixie文本
总之,伪类操作的对象是文档中已有的元素,而伪元素是创建一个文档外的元素,因此,伪类和伪元素的区别在于有没有创建元素
伪类和伪元素的特点:
- 伪类和伪元素都不存在于原文档和文档树中
- 伪类允许出现在选择器的任何位置,而伪元素只能跟在选择器的最后一个简单的选择器后面
- 伪元素名和伪类名大小写不敏感
有些伪类是互斥的,而其他的可以在同一个元素上。
伪元素:
:before/:after/first-letter/:first-line:前面可以是一个冒号,也可以是双冒号
::selection/::placeholder/::backdrop:前面只能是双冒号
- :first-letter:选择标签的第一个字符
<head> <style> /* 1. 选择p标签的第一个字符 */ p:first-letter{ font:30px 黑体; color:darkseagreen; text-indent:2em; } </style> </head> <body> <p>总之,伪类操作的对象是文档中已有的元素,而伪元素是创建一个文档外的元素 因此,伪类和伪元素的区别在于有没有创建元素</p> </body>
- :first-line:选择第一行
/* 2.选择第一行 */ p:first-line{ text-decoration:underline; }
- :before:在标签内容前添加
/* 3 在标签内容前添加 */ p:before{ content:"加" }
- :after:在标签内容结束是添加
/* 4 在标签内容结束是添加 */ p:after{ content:"*****" }
结果显示:
二.CSS浮动布局&盒模型
1. CSS浮动介绍
1.1.什么是浮动?
float属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。如果浮动非替换元素, 则要指定一个明确的宽度;否则,它们会尽可能地窄。
浮动让块级元素不独占一行;目的(使用场景):可以将块级元素排成一排。
值 | 描述 |
left | 元素左浮动 |
right | 元素右浮动 |
none | 默认值,不浮动,并显示其在文本中出现的位置 |
inherit | 规定从父元素那里继承float属性的值 |
1.2.浮动的实现
<head> <style> .wrapper{ width:600px; margin:0 auto; border:1px solid #666; } .box1,.box2{ width:200px; height:150px; } .box1{ background-color: #49ffcc; float:left; } .box2{ background-color: #41ff49; float:right; } </style> </head> <body> <div class="wrapper"> <div class="box1">box1</div> <!--这里的div属于块级元素要独占一行--> <div class="box2">box2</div> </div> </body>
1.3 浮动的原理
就是让元素脱离文档,不在用标准文档
- 属性值:
-
- left:左浮动
- right:右浮动
- none:不浮动(默认)
- inherit:继承父元素float的属性值
浮动后不管的块级还是行级元素,不会显示在下一行(解决方法:清楚浮动)。
2. 清除浮动
目的:让后面的元素自动调到下一行
方法:
2.1添加空标,并设置样式:clear:both;
clear:left :清除左浮动
clear:right :清除右浮动
clear: both: 清除左右浮动
clear:none: 左右浮动都不清除
<head> <meta charset="UTF-8"> <title>清除浮动</title> <style> .wrapper{ width:600px; margin:0 auto; border:1px solid #666; } .box1,.box2,.box3{ width:200px; height:150px; } .box1{ background-color: #49ffcc; float:left; } .box2{ background-color: #41ff49; float:right; } .clear{ clear: both; } .box3{ background-color: #ffb31f; } </style> </head> <body> <div class="wrapper"> <div class="box1">box1</div> <!--这里的div属于块级元素要独占一行--> <div class="box2">box2</div> <div class="clear"></div> <!--空标签清除浮动--> <div class="box3">box3</div> </div> </body>
结果图:
2.2 在要清除浮动的父级添加样式 :overflow:hidden;
<head> <style> .wrapper{ width:600px; margin:0 auto; border:1px solid #666; overflow: hidden;/*2. 清除浮动方法2*/ } .box1,.box2,.box3{ width:200px; height:150px; } .box1{ background-color: #49ffcc; float:left; } .box2{ background-color: #41ff49; float:right; } .box3{ background-color: #ffb31f; } </style> </head> <body> <div class="wrapper"> <div class="box1">box1</div> <!--这里的div属于块级元素要独占一行--> <div class="box2">box2</div> </div> <div class="box3">box3</div> </body>
结果图:
overflow:hidden;超出部分隐藏.,也可以用来实现浮动.
- 属性值:
-
- visible :默认值。内容不会被修剪,会呈现在元素框之外,不剪切也不添加滚动条。
- auto :不显示超出内容,不剪切,会按照内容是否超出,自动添加,可用作清除浮动。
- hidden :内容会被修剪,并且其余内容是不可见的,此属性还有清除浮动、清除margin-top塌陷的功能.
- scroll :内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
2.3 使用:after
在要清除浮动的父元素添加伪元素,并设置样式.
.wrapper:after{ content:""; display:block; clear:both; } <div class="wrapper"> <div class="box1">box1</div> <!--这里的div属于块级元素要独占一行--> <div class="box2">box2</div> </div> <div class="box3">box3</div>
结果图:
*** :实际项目开发过程首选方案2
*** 文本垂直居中:
display: table-cell; vertical-align: middle;
*** padding的四个值:
padding:1px 2px 3px 4px 1px2px3px4px的位置顺序是上右下左(逆时针的方向)
padding:1px2px; 上下1px 左右2px;
padding:1px 2px 3px;上1px 左右2px 下3px;
3. CSS盒子模型
每个元素都是一个盒子,一个盒子由margin(外边距)、border(边框线)、padding(内边距)、content(内容)组成
区别外边距和内边距是以边框为参照物
系统默认外边距为8px。所以项目开发是初始化需要设置为0;
3.1 外边距(margin)
外边距:margin,之边框线之外的距离
- margin-left:左边距
- margin-right:右边距
- margin-top:上边距
- margin-bottom:下边距
- margin:可以用来设置任意一边的距离,可以带1-4个参数;
-
- 1个(apx):表示上下左右都有apx这个外边距
- 2个(apx bpx):表示上下外边距为apx,左右外边距为bpx
- 3个:(apx bpx cpx) 上为apx 左右为bpx 下为cpx
- 4个:(apx bpx cpx dpx):上为apx,右为bpx,下为cpx,左位dpx
3.2 内边距(padding)
内边距:指的是元素文本内容与边框的距离。
用法与margin相同
3.3 边框(border)
- 属性
-
- border-width : 设置边框的宽度。
- border-style : 设置边框的样式。
-
-
- none: 默认值,无边框。
- solid: 定义实线边框。
- double 定义双实线边框。
- dotted`: 定义点状线边框。
- dashed:定义虚线边框。
-
-
- border-color : 设置边框的颜色。
border 边框的简写: {width style color} : 定义宽度为width,样式为style,颜色为color的边框。
3.4 盒子的真实尺寸
盒子的width和height值固定时,如果盒子增加border和padding,盒子整体的尺寸会变大,所以盒子的真实尺寸为:
盒子宽度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下
3.5 display属性
- 属性值:
-
- none:不现实元素
- block:块显示,将元素的前后设置换行符,将行级标签转换为块级标签,因为行级标签不识别宽高,块级标签显示,转换后行级标签也可以显示宽高了。
- inline:行内显示,将块级转换为行级。
- inline-block:将块级或者行级比标签转换为行内块标签。
4.table表格
4.1 table
- 属性:
-
- height:高度
- width:宽度
- border-collapse:单线边框
- border:边框线
- 双线边框
<style> table,td{ border:1px solid #666; } </style>
结果显示:
- 单线边框
<style> table,td{ border:1px solid #666; border-collapse: collapse; } </style>
结果显示:
4.2 td tr
- td,tr属性
-
- height:高度
- width:宽度
- border:边框线
- text-align:文本左右对其(left(默认)/center/right)
- vertical-align:文本垂直对其方式(top/middle(默认)/bottom)
5. 列表样式
不是描述性的文本,任何内容可以认为是列表。比如:菜单、商品列表等
5.1列表类型:
无序列表(ul)、有序列表(ol)、自定义列表(dl)
ul和ol的列表项都是用li定义的,而dl是由一个dt和一个或多个dd组成
dl一般用来设定一个定义,比如名词解释等。dt:标题,dd:描述,用来对dt内容进行解释并说明。
5.2 样式(用来修改表示类型)
list-style-image:用图像表示标识
ul{ /*list-style-type:square;*/ /*list-style-type:none;*/ /*list-style-position:outside;*/ list-style-image:url("img/icon.png"); }
结果显示:
list-style-position:标识的位置(inside/outside(默认值))
list-style-type:标识类型
简写:list-style:list-style-image list-style-position list-style-type;
list-style的值顺序任意,且可以省略。
list-style-type的属性值:
- 无序:disc(实心圆--默认)/circle(空心圆)/square(矩形块)
- 有序:decimal(默认)/decimal-leading-zreo(数字前有个0)/lower-roman(小写的罗马)/upper-roman(大写的罗马)/lower-alpha(小写字母)/upper-alpha(大写字母)/lower-greek(小写的希纳字母)/lower-latin(小写的拉汀)/upper-latin
ol{ list-style-type: decimal-leading-zero; }
结果显示:
- 有序、无序:none:取消类型
5.3 轮播图
作用:主要用于产品或公司相关宣传
组成:
- 轮播的组图(至少2个以上,不能太多)
- 控制器
- 计数器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> <link type="text/css" rel="stylesheet" href="css介绍/carousel.css"> </head> <body> <!--.carousel>ul.carousel-imgs>li*3>a--> <div class="carousel"> <!--1.轮播组图--> <ul class="carousel-imgs"> <li><a href="#"><img src="img/banner_01.jpg"/></a></li> <li><a href="#"><img src="img/banner_02.jpg"/></a></li> <li><a href="#"><img src="img/banner_03.jpg"/></a></li> </ul> <!--2. 控制器--> <div class="pre"></div> <div class="next"></div> <!--3. 计数器--> <div class="count"> <ul> <li class="active"></li> <li></li> <li></li> </ul> </div> </div> </body> </html>
* { margin:0; padding:0; } li{ list-style-type:none; } a{ text-decoration:none; } .carousel{ width:1000px; height:300px; margin:0 auto; background-color: #bf82ff; position:relative;/*相对定位*/ overflow: hidden; } /*1. 轮播图组*/ .carousel-imgs{ width:99999px; } .carousel-imgs li{ float:left; } .carousel-imgs img{ width:1000px; height:300px; } /*2. 控制器*/ .pre,.next{ width:32px; height: 32px; position:absolute;/*绝对定位,脱离文档流 相对于relative定位*/ top:50%; margin-top:-16px; } .pre{ background-image:url("../img/prev.png"); left:50px; } .next{ background-image:url("../img/next.png"); right:50px; } /*3. 技术器*/ .count{ width:1000px; height:10px; position:absolute; bottom:15px; } .count ul{ width:60px; margin:0 auto; /*background-color: #f755ff;*/ } .count ul li{ width:10px; height:10px; opacity: .5; cursor: pointer;/*鼠标形状设置为手型*/ background-color:darkgray; float: left; margin-right:10px; border-radius: 50%;/*圆角*/ } .count ul .active{ background-color: #ff5951; opacity:1;/* 0-1 1 为不透明*/ }