一.css语法
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
CSS实列
p { color:red; text-align:center; }
选择器{ 属性1:属性值1;属性2:属性值2;}
css注释
注释是解释你的代码,并且可以随意编辑它,浏览器会忽略它。
CSS注释以 /* 开始, 以 */ 结束
示例:/*这是个注释*/
二.CSS选择器
(1)
标签选择器
语法格式:
标签名{属性1:属性值1;属性2:属性值2}
元素名{属性1:属性值1;属性2:属性值2}
(2)类选择器:
.类名{属性1:属性值1;属性2:属性值2}
标签调用class="类名"
(3)多类名选择器
可以给标签指定多个类名,从而达到更多的选择目的
注:样式显示效果跟html元素中的类名先后顺序没有关系,受css样式书写的上下顺序有关。
各个类名中用空格隔开
<div class="box1 box2">我是标签
</div>
(4)id选择器
<div id="last">我是标签</div>
id选择器与类选择器的区别:
类选择器可以多次重复使用,id选择器不得重复只使用一次
(5)通配符选择器
用“*”表示,匹配页面中所有的元素
基本语法:
*{属性1:属性值1;属性2:属性值2;}
(6)符合选择器
后代选择器:
div p { color:pink;} p 一定是div的孩子 中间空格隔开
子代选择器:
ul li >a { color:red;} a 是 li 的亲儿子 用 >
交集选择器:
div.red;{color:red;}既是div 又是叫 red 用 . 隔开
<div class="red"> 我是标签</div>
并集选择器:
div ,p ,span {color:red;}用逗号隔开 相当于“和” 集体声明适用于相同样式
(7)伪类选择器
适用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,用 ":"开头
:link 未访问过的链接
:visited 已访问过的链接
:hover 鼠标移动到链接上
:active 选定的链接
三.CSS如何插入样式表
(1)外部样式表
每个页面使用 <link> 标签链接到样式表。 <link> 标签在(文档的)头部:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
(2)内部样式表
<style type="text/css">
p{
color:red;
}
</style>
(3)内联样式
<p style="属性1;">我是标签</p>
四.CSSbackground背景
background-color:背景颜色 transparent透明色
background-image:背景图片地址
body {background-image:url('paper.gif');}
background-repeat:是否平铺 repeat-x背景图像在横向上平铺 repeat-y背景图像在纵向上平铺
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-repeat:repeat-x;水平方向平铺
}
background-position:背景位置
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
x% y%第一个值是水平位置,第二个值是垂直。左上角是0%0%。右下角是100%100%。如果仅指定了一个值,其他值将是50%。 。默认值为:0%0%
background-attachment:背景固定还是滚动 scroll fixed
croll | 背景图片随着页面的滚动而滚动,这是默认的。 |
fixed | 背景图片不会随着页面的滚动而滚动。 |
local | 背景图片会随着元素内容的滚动而滚动。 |
背景半透明:
backgroung:rgba(0,0,0,1)取值为0-1
color:颜色:
十六进制:#FF0000
RGB:rgb(255,0,0)
五.CSS文本text
(1).设置文本水平对齐方式
text-align:center/left/right;
注:当text-align设置为"justify",每一行被展开为宽度相等,左,右外边距是对齐
text-indent:首行缩进 2em;
(2).文本的修饰text-decoration:
none:无下划线
underline下划线
overline上划线
line-through:删除线
(3)line-height:行间距 行与行之间的距离
(4)文本转换
用于所有字句变成大写或小写字母,或每个单词的首字母大写。
text-transform:uppercase;大写
text-transform:lowercase;小写字母
text-transform:capitalize;每个单词的首字母大写
(5)文本缩进
文本缩进属性是用来指定文本的第一行的缩进
text-indent:20px;
(6)CSS vertical-align 属性
设置一个元素的垂直对齐方式
baseline | 默认。元素放置在父元素的基线上。 |
sub | 垂直对齐文本的下标。 |
super | 垂直对齐文本的上标 |
text-bottom | 把元素的底端与父元素字体的底端对齐。 |
(7)CSS3 text-shadow 属性
text-shadow: h-shadow v-shadow blur color;
text-shadow:h-shadow (水平阴影的位置) v-shadow (垂直阴影的位置) blur (模糊的距离) cloror;
(8)CSSwhite-space属性
属性指定元素内的空白怎样处理
normal 默认。空白会被浏览器忽略
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止
pre-wrap 保留空白符序列,但是正常地进行换行
(9)CSS word-spacing属性
p
{
word-spacing:30px;
}
六.CSS 字体
(1)字体样式
font-size:px;字体大小
font-family:设置字体样式如宋体多种字体用逗号隔开
font-weight:字体加粗 bold (粗体)/ 700 /normal(正常)/400
font-style:字体风格 normal(正常)/italic(斜体)/
(2) 字体连写
字体连写
选择器{font:font-style font-weight font-size/line-height font-family;}
必须按顺序写不能更改顺序 用空格隔开
七.CSS列表属性
list-style 简写属性在一个声明中设置所有的列表属性
ul
{
list-style: square url("sqpurple.gif");
}
list-style-image 使用图像来替换列表项的标记
ul
{
list-style-image:url('sqpurple.gif');
}
list-style-position设置在何处放置列表项标记
inside:列表项目标记放置在文本以内,且环绕文本根据标记对齐
outside:默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐
inherit:规定应该从父元素继承 list-style-position 属性的值。
list-style-type设置列表项标记的类型
none:无标记
disc:默认。标记是实心圆
circle:标记是空心圆
square:标记是实心方块
decimal:标记是数字
decimal-leading-zero:0开头的数字标记。(01, 02, 03, 等。
lower-roman:小写罗马数字(i, ii, iii, iv, v,)
upper-roman:大写罗马数字(I, II, III, IV, V
lower-alpha:小写英文字母
upper-alpha:大写英文字母
七.CSS表格
指定CSS表格边框,使用border属性。
table, th, td
{
border: 1px solid black;
}
折叠边框
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
表格高度和宽度
Width和height属性定义表格的宽度和高度。
表格文字对齐
表格中的文本对齐和垂直对齐属性
1.text-align属性设置水平对齐方式,向左,右,或中心
2.vertical-align垂直对齐属性设置垂直对齐,比如顶部,底部或中间
td
{
text-align:right;
}
td
{
height:50px;
vertical-align:bottom;
}
表格填充
如需控制边框和表格内容之间的间距,应使用td和th元素的填充属性
td
{
padding:15px;
}
八.CSS盒子模型
css盒子模型
- Margin(外边距) - 清除边框外的区域,外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域,内边距是透明的。
- Content(内容) - 盒子的内容,显示文本和图像。
盒子边框 样式 :border:1px solid red;
border:border-width/border-style/border-color
border-style:
none:没有边框
solid:单实线
dashed:虚线
dotted:点线
double:双实线
border-top:上边框/bottom/right/left
边框单独设置各边:
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
.padding内边距:
padding指边框与内容之间的距离
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
8.padding:20px上下左右都是
padding:10px 20px;上下10px 左右20px
padding:10px 20px 30px 上10 左右 20 下30
padding:10px 20px 30px 40px 上 10右 20 下30左40
非常严重的问题:padding 会撑开 带有width和height盒子 经过计算不超过
CSS轮廓属性:
设置元素周围的轮廓
p
{
outline:#00FF00 dotted thick;
}
outline-color,规定边框的颜色。
outline-style,规定边框的样式
outline-width,规定边框的宽度
CSS margin 外边距
CSS margin(外边距)属性定义元素周围的空间
margin:25px 50px 75px 100px;
- 上边距为25px
- 右边距为50px
- 下边距为75px
- 左边距为100px
margin:25px 50px 75px;
- 上边距为25px
- 左右边距为50px
- 下边距为75px
margin:25px 50px
上下边距为25px 左右边距为50px
九.css分组选择器和嵌套选择器
分组选择器
为了尽量减少代码,你可以使用分组选择器。
每个选择器用逗号分隔。
h1,h2,p
{
color:red;
}
嵌套选择器
.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式
十.css元素显示与隐藏
1.元素的显示与隐藏
在css中有三个显示和隐藏的单词比较常见,display/visibility/overflow
Display:none;隐藏对象与它相反的是display:block;除了转换为为了块级元素之外,同时还有显示元素的意思
特点:隐藏之后,不再保留位置
2.visibilty:hidden;对象隐藏
特点:隐藏之后,继续保留原有位置,
3.overflow
Overflow:visibile不剪切内容也不添加滚动条
Auto:超出自动显示滚动条,不超出不显示滚动条
Hidden:超出部分隐藏掉
Scroll:不管超出内容否,总是显示滚动条
十一.css鼠标样式
Cursor:
Defaulit 小白/ pointer 小手/ move 移动/ text 文本
防止拖拽文本域resize
<textarea style=”resize:none;”></textarea>
十二.css定位position
1.相对定位
元素的定位
(1)边偏移
top:顶端偏移量 定义元素相对于其父元素上边线的距离
bottom:底部偏移量 定义元素相对于其父元素上边线的距离
left:左侧偏移量 定义元素相对于其父元素上边线的距离
right: 右侧偏移量 定义元素相对于其父元素上边线的距离
(2)定位模式
position:
static:自动定位
relative:相对定位,相对于其原文档流的位置进行定位
absolute:绝对定位,相对于其上一个已经定位的父元素进行定位
fixed:固定定位 相对于浏览器窗口进行定位
(3)注意:相对定位最重要的一定,它可以通过边偏移动位置,但是原来的所占的位置,继续占有
每次移动的位置,是以自己的左上角为基点移动(相对于自己来移动位置)
相对定位的盒子仍在标准流中
定位的主要价值就是移动位置,让盒子到我们向想要的位置上去
2.绝对定位
注意:绝对定位最重要的一点是,它可以通过边偏移动位置,但是它完全脱标 完全不占位置
若所有父元素都没有定位,以浏览器当前屏幕为准对齐
绝对定位是将元素依据最近的已经定位(绝对,固定或相对定位)的父元素(祖先)进行定位:(父级有定位)
(4)子绝父相
意思是 子级是绝对定位的话,父级要用相对定位
(5)绝对定位的盒子水平/垂直居中
普通的盒子是左右 margin 改为 auto 就行,但是对于绝对定位就无效了
定位的盒子也可以水平或者垂直居中,有一个算法
首先left50% 父盒子的一半大小
然后走自己外边距负的一半值就可以了 margin-left
3.固定定位
当对元素设置固定定位后,它将脱离标准文档流的控制,始终依据浏览器窗口来定义自己的显示位置
注意:
固定定位的元素跟父亲没有任何关系,只认浏览器
固定定位完全脱标,不占有位置,不随着滚动条滚动
4.模式转换
display:none;/display:block;
5.叠放次序
z-index 要想调整重叠定位元素的堆叠顺序,可以对定位元素应用z-index层叠等级属性,其取值可为正整数,负整数和
(1) 默认属性值为0,取值越大,定位元素在层叠元素中越居中
(2)后面数字一定不能加单位
(3)只有相对定位,绝对定位,固定定位有此属性,其余标准流,浮动,静态定位都无此属性
十三.CSS Overflow
.overflow
Overflow:visibile 不剪切内容也不添加滚动条
Auto:超出自动显示滚动条,不超出不显示滚动条
Hidden:超出部分隐藏掉
Scroll:不管超出内容否,总是显示滚动条
十四.CSS清除浮动
浮动
css的定位机制有3种:普通流(标准流),浮动和定位
普通流 实际上就是一个网页内标签元素正常从上到下,从左到右排列顺序的意思
float:left/right/none 元素向左浮动/向右浮动/元素不浮动/元素不浮动
浮动脱离标准流,不占位置,会影响标准流,浮动只有左右浮动
1.清除浮动
其实本质叫做闭合浮动更好一些,清除浮动就是把浮动的盒子圈到里面,让父盒子闭合出口和入口不让他们出来影响其他元素。
在css中,clear属性用于清除浮动,其基本语法格式如下。
选择器:{clear:属性值}
left清除左侧浮动的影响
right清除右侧浮动的影响
both同时清除左右两侧的影响
额外标签法:
.clear{
clear:both;如果清除了浮动,父亲去自动检测孩子的高度,以最高为准
}
<div class="clear"></div>
最后一个浮动标签的后,新添加一个标签 清除浮动
2.overflow
overflow:hidden;给父级加/不是所有的浮动我们都需要清除,谁影响布局,就清除谁
3.伪类清除浮动
:after方式为空元素的升级版,好处是不用单独加标签了
使用方法:
.clearfix:after { content:""; display:block; height:0;clear:both; visibility:hidden;}
.clearfix{ zoom:1}
优点:符合闭合浮动思想 结构语义化正确
缺点:用于IE6-7不支持 :after ,使用zoom:1 触发hasLayout
代表网站:百度,淘宝网,网易
4.双伪元素清除浮动
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix{
zoom:1
}
优点:代码更简洁
缺点:用于IE6-7不支持 :after ,使用zoom:1 触发hasLayout
十五.CSS布局
元素水平居中
要水平居中对齐一个元素
margin: auto
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
文本居中对齐
text-align: center;
图片居中对齐
要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中:
img {
display: block;
margin: auto;
width: 40%;
}
垂直居中对齐
CSS 中有很多方式可以实现垂直居中对齐。 一个简单的方式就是头部顶部使用 padding:
.center {
padding: 70px 0;
border: 3px solid green;
}
如果要水平和垂直都居中,可以使用 padding 和 text-align: center:
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
除了使用 padding 和 line-height 属性外,我们还可以使用 transform 属性来设置垂直居中:
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
十六.CSS组合选择符
后代选择器(以空格 分隔) 子元素选择器(以大于 > 号分隔)
相邻兄弟选择器(以加号 + 分隔) 普通兄弟选择器(以波浪号 ~ 分隔)
后代选择器
div p { background-color:yellow; }
div p { color:pink;} p 一定是div的孩子 中间空格隔开
子元素选择器
ul li >a { color:red;} a 是 li 的亲儿子 用 >
div>p { background-color:yellow; }
相邻兄弟选择器
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器
div+p { background-color:yellow; }
后续兄弟选择器
后续兄弟选择器选取所有指定元素之后的相邻兄弟元素
div~p { background-color:yellow; }
十七.CSS伪类
:first-child 选择器
匹配 <p> 的父元素的第一个<p>元素
p:first-child { background-color:red; }
:before 选择器
每个 <p>元素之前插入内容
p:before
{
content:"Read this: ";
}
:after 选择器
每个<p>元素之后插入内容
p:after { content:"- Remember this"; }
:first-line 伪元素
伪元素用于向文本的首行设置特殊样式
p:first-line { color:#ff0000; font-variant:small-caps; }
:first-letter 伪元素
伪元素用于向文本的首字母设置特殊样式
p:first-letter { color:#ff0000; font-size:20px; }
十七.CSS特性
.溢出的部分
White-space使用于强制一行显示内容
Normal:默认处理方式
Nowrap:强制在同一行显示所有文本,
.text-overflow 文字溢出
text-overflow:clip /ellipsis
clip:不显示省略标记(…)简单才裁剪
ellipsis:当对象内文本溢出时省略标记
.css三大特性
(1)#box p选择id为box的元素的所有后代元素p
(2)#box>p选择id为box的元素的所有直接元素p
(3)p, .box选择的是p元素和所有类名为box的元素
(4) p.box选择的是拥有box类名的p元素 交集选择器
.css层叠性
一般情况下,如果出现样式冲突,则会按照css书写的顺序,以最后的样式为准,就近原则
css继承性
子标签会继承父标签的某些样式,如文本颜色,想要设置一个可继承的属性,只需要将它应用于父元素即可
css优先级
(1)权重相同 则就近原则
(2)权重叠加 div p{color:red;} 0001+0001=0002
(3)权重继承问题:权重为0 标签本身设置css样式
.sublime快捷键
生成标签直接输入标签名按tab键 如div 然后按tab键 就可以生成<div></div>
生成多个相同标签 加上 * 如 div*3 快键生成3个div
如果有父子级关系的标签 用 “ >” ul>li就可以了
如果有兄弟关系的标签,用 +,如 div+p
生成带有类名或id名字,直接写.demo 或 #two tab
元素的显示模式
块级元素:<h1>~<h6> <p> <div> <ul> <ol> <li>有高度跨度 独占一行
行内元素:<a> <strong> <b> <em> <i> <del> <span> 无高度宽度 默认的宽高 只能放文本或其他元素 一行可放多个
行内块元素:<img /> <input /> <textarea></textarea>相邻行内块在一行上,但之间有空白间隙 可调宽高
标签显示模式转换
块转行内:display:inline;
行内转块:display:block;
块,行内元素转内为行内块:display:inline-block;