WEBBASIC---CSS
- CSS 层叠样式表单
-
网页的三个层次:
- 内容层:HTML承载页面的内容
- 表示层:CSS的作用就是给网页做化妆的,实现显示效果
- 行为层:JS为网页添加程序行为
-
第一个CSS
<style type="text/css"> /* 第一个CSS(在CSS中只能有这种格式的注释) */ p { color: red; } </style>
CSS的三种使用方式
-
内联式CSS:
- 直接写在标签的style属性中的CSS样式
- 具有最高的优先级别
-
只作用在当前元素上,不能复用的样式
<!-- CSS内联样式(inline style) --> <p style="color:#00f">内联式CSS</p>
-
网页内嵌式:
- 使用
<style>元素嵌入到页面中的CSS样式,在<head>中用<style>引入 -
作用在当前页面中的元素,可以在当前页面中复用
<style type="text/css"> /* 第一个CSS(在CSS中只能有这种格式的注释) */ p { color: red; }
- 使用
-
外部样式
- 样式保存在.css文件中
-
使用
<link>元素引用到当前页面中在<head>中引入<link rel="stylesheet" href="http://cdn.tmooc.cn/tmooc-web/css/iconfont.css"> -
可以作用在所有引用了CSS文件的网页,可以在这些网页中复用
-
@ipmort样式:link外部样式所有浏览器都支持,而该方式低版本IE不支持;
@import方式是再html加载完毕之后再加载;不支持js动态修改<style type="text/css"> @import url("css地址"); </style>
大型网站一般都是使用外部样式CSS
CSS样式的优先级
当内联样式,内部样式,外部样式,等多个样式同时作用在同一个元素时,元素最终优先采用哪个样式.称为:样式的优先级.
-
浏览器(用户代理)默认样式优先级最低
-
内部样式和外部样式,哪个距离元素近哪个生效,从前到后一次覆盖
-
内联样式优先级最高
//demo <style type="text/css"> p { color:red; /*红色*/ } h2 { color:red; } p { color:#ff0; /*黄色*/ } </style> <link rel="stylesheet" href="test.css"><!-- 蓝色 --> <style type="text/css"> p { color:gray; } </style>
CSS的继承特性
- 元素有父子嵌套关系的时候,外层设置的可继承CSS属性,可以被子元素继承.(border不可继承)
常见的可继承属性:颜色,字体等
不可继承的：display、margin、border、padding、background、height、min-height、
max-height、width、min-width、max-width、overflow、position、left、
right、top、bottom、z-index、float、clear、table-layout、vertical-align、
page-break-after、page-bread-before和unicode-bidi。
所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、
font-family、font-size、font-style、font-variant、font-weight、
text-decoration、text-transform、direction。
终端块状元素可继承：text-indent和text-align。
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
CSS语法
选择器(用于选择样式作用范围) {
样式属性组(属性:值;属性:值;...)
}
选择器
-
元素选择器:使用
元素名选择全部的同类元素模板: p/h1/a/img {color:red} -
id选择器:使用
#id选择页面中唯一的一个元素网页中的id属性应该唯一
#menu {color;red} <style type="text/css"> /* #menu : 用于选择唯一的一个元素*/ #menu { color:red; background-color:#ddd; } </style> </head> <body> <h1>选择器</h1> <h2>id选择器</h2> <p>这是一个文本</p> <p id="menu">传奇好玩嘛?</p> </body> -
类选择器:使用
.class选择一组具有相同class属性的元素.error {color:red}一个元素上可以使用多个class绑定多个类选择器样式 class="class1 class2 ..."
<style type="text/css"> .error { color: red; } .fld { background-color: #ddd; } .text { background-color: #ddd; } </style> </head> <body> <h1>类选择器</h1> <div> <!-- class元素中可以定义多个类,用空格隔开 (实现统一和特殊==>实现符合效果) --> <label class="error fld">用户</label> <input class="error text" type="text"> <span class="error fld">必须输入</span> </div> <div> <label class="fld">密码</label> <input type="password"> <span class="fld">8~10个字符</span> </div> </body> -
派生选择器:利用元素的层级关系选择元素,绑定样式
子孙后代选择
ul li {color:red;} //选择ul中所有的li元素<style type="text/css"> ul{ color:red;/*颜色,字体可继承*/ } ul li { border: 1px solid blue; } </style>子选择
ul>li>ul>li {color:red;}//选择 ul 的 li 的 ul 的 li 元素<style type="text/css"> body {/*一般在body中设置全局可继承参数*/ color:gray; font-family: 'Consolas','文泉驿正黑','黑体'; font-style: italic; } `#index>li>ul>li { border: 2px solid #dde; } </style> -
选择器组:为了给一组元素设置一致的样式,可以使用组选择器
h1, h2, h3, h4, h5 {border-bottom: 1px solid #ddd;}
-
伪类选择器:用于设置元素在不同显示状态下的效果
- 鼠标悬停:hover,用于设置鼠标停留在元素上面时候的显示效果
- :active 向被激活的元素添加样式。 1
- :focus 向拥有键盘输入焦点的元素添加样式。 2
- :hover 当鼠标悬浮在元素上方时，向元素添加样式。 1
- :link 向未被访问的链接添加样式。 1
- :visited 向已被访问的链接添加样式。 1
- :first-child 向元素的第一个子元素添加样式。 2
-
:lang 向带有指定 lang 属性的元素添加样式。 2
<style type="text/css"> /*hover: 用于设置鼠标悬停在li上面的效果*/ `#list li:hover { color: #fff; background-color: #000; } </style> <style type="text/css"> input { border: 1px solid #ddd; } /*设置input输入框获得焦点时候的伪类效果*/ input:FOCUS { border: 1px solid red; background-color: yellow; } .btn { border: 2px outset #ddd; /*突出边框*/ background-color: #eee; /*按钮背景色*/ text-align: center; /*文字居中*/ cursor:pointer;/*设置鼠标箭头*/ width:100px; } /*设置按钮被按下去的效果*/ .btn:ACTIVE { border: 2px inset #ddd; background-color: red; } </style> <style type="text/css"> label:HOVER { color:yellow; } /*未访问的连接*/ a:LINK { color:blue; } /*访问过的连接*/ a:VISITED { color:red; } </style> <style type="text/css"> .txt { font-family: '黑体'; /*字体*/ text-indent: 2em; /*文本缩进2个字符宽度,通常情况下,中文缩进2个字符宽度*/ font-size: 24px; /*设置字体12像素*/ line-height: 1.6em; /*行高--设置文件的行间距*/ color:#d54747; text-decoration:blink; } h2 { text-align: center;/*块元素中的文本居中*/ } a { text-decoration: none;/*消除下划线*/ } </style>
-
复合使用选择器id,类,元素,伪类,等选择器都可以组合使用
p.error 选择p元素,其calss
CSS常用属性
值得单位
- px:像素
- em:字体大小-->设置行高
- % 百分比 --> 处理页面布局
- 颜色字面量 red blue等;16进制颜色(RGB)
文本相关属性
-
文字缩进
text-indent:2em -
设置字体大小
font-size:12px; -
设置行高
line-height:1.6; -
设置字体颜色
color: RGB -
设置文本居中
text-align:center;
盒子模型
页面元素绘制时候占用的页面的方式
盒子外边界margin相互侵占
<style type="text/css">
.demo {/*公共部分抽取类:利用类选择器复用样式*/
width:100px;/*设定内容区域的宽*/
height:80px;/*设定内容区域的高*/
padding:20px;/*内边距:内容与盒子边界的缝隙*/
border:3px dashed #ddd;/*设定边框,盒子皮的厚度*/
/*背景绘制在内边距之内,外边距范围不绘制背景*/
background-color:#ff0;
}
#box {
margin:8px;/*外边距:盒子与盒子之间的距离*/
}
#box2 {
/*id选择器优先于类选择器*/
border:3px dashed #00f;/*设定边框,盒子皮的厚度*/
/*margin:18px;*//*同时设置外边距的长款高*/
/*margin-left:8px;*//*单独设置左侧外边距*/
/*margin-right:8px;*/
/*margin-top:18px;*/
/*margin-bottom:8px;*/
margin:18px 8px 8px/*margin:上右下左,单行社会之4边属性.从后向前可以省略数值,们就会使用对边代替*/
}
</style>
<div>盒子模型</div>
<div id="box" class="demo">范传奇呵呵</div>
<div id="box2" class="demo">盒子模型外边距margin侵占</div>
盒子模型中的内容
一般情况下,如果不设置宽高,盒子随着内容自动增长,当设置了宽高以后,如果内容超过盒子的范围,可以利用溢出属性设置内容显示的方式.
overflow 溢出--设置溢出以后的显示方式,默认情况溢出显示 ,溢出隐藏--hidden;scroll--不管是否溢出都显示滚动条,auto--当内容溢出的时候显示滚动条,若没有溢出则不现实滚动条
<style type="text/css">
.c1, .c2, .c3, .c4 {
border: 2px solid #00f;
margin: 10px;
}
.c2, .c3, .c4 {
width: 100px;
height: 80px;
}
.c3 {
/*设置溢出属性隐藏:则溢出部分不再显示*/
overflow: hidden;
color: yellow;
}
.c4 {
/*显示滚动条*/
/*overflow:scroll;*/
overflow: auto; /*根据内容自动控制是否显示滚动条,如果内容没有溢出就不显示滚动条,否则显示*/
}
.c5 {
width: 300px;
height: 300px;
border: 1px solid #eee;
overflow: auto;
}
</style>
</head>
<body>
<h1>溢出内容属性</h1>
<div class="c5">
<img src="n.jpg">
</div>
<div class="c4">
<strong>c4设置溢出隐藏后多的内容滚动条显示显示</strong>定位比较难，有好多种类型，margin，position之类的很烦，什么相对啊，绝对啊，就需要好好学了。
隐藏属性可以把需要展示的东西隐藏，可以直接连位置都没有，跳出流；也可以把他的为位置留着，占个位子。
背景色一种最重要的复制，repeat，可以使用重复，横向复制-x，垂直复制-y。
</div>
<div class="c3">
<strong>c3设置溢出隐藏后,多的内容再显示</strong>定位比较难，有好多种类型，margin，position之类的很烦，什么相对啊，绝对啊，就需要好好学了。
隐藏属性可以把需要展示的东西隐藏，可以直接连位置都没有，跳出流；也可以把他的为位置留着，占个位子。
背景色一种最重要的复制，repeat，可以使用重复，横向复制-x，垂直复制-y。
</div>
<div class="c2">
<strong>c2设置大小以后内容仍然显示:</strong>定位比较难，有好多种类型，margin，position之类的很烦，什么相对啊，绝对啊，就需要好好学了。
隐藏属性可以把需要展示的东西隐藏，可以直接连位置都没有，跳出流；也可以把他的为位置留着，占个位子。
背景色一种最重要的复制，repeat，可以使用重复，横向复制-x，垂直复制-y。
</div>
<div class="c1">
<strong>c1默认情况下盒子随着内容增长:</strong>定位比较难，有好多种类型，margin，position之类的很烦，什么相对啊，绝对啊，就需要好好学了。
隐藏属性可以把需要展示的东西隐藏，可以直接连位置都没有，跳出流；也可以把他的为位置留着，占个位子。
背景色一种最重要的复制，repeat，可以使用重复，横向复制-x，垂直复制-y。
</div>
</body>
背景设置
设置盒子模型的border内部的背景绘制效果
-
设置背景色
-
设置背景图片
- 设置图片的重复方式:平铺,x方向重复,y方向重复
-
设置图片的偏移位置
- 相对位置偏移
-
绝对位置便宜
<style type="text/css"> .b1 { width: 800px; height: 1000px; border: 2px solid #00f; /*设置背景图片*/ background-image:url(../imgs/background.png); /*贴图默认为repeat:平铺贴图 no-repeat:不平铺 repeat-x:x方向平铺贴图 repeat-y:y方向平铺贴图 */ background-repeat:no-repeat; /*设置相对位置贴图:center,top,bottom,right,left*/ background-position:top center; } .btn { border:0px; background-color:#FFF; width:20px; height:16px; padding:0px; background-image:url(./btn.png); background-attachment:scroll;/*scroll:背景图跟着一起动,fixed:背景图固定*/ } .btn:hover { /*绝对对位置偏移贴图*/ background-position:-30px 0px; } </style> body { background-image: url(../imgs/timg.jpg); /*attachment:附件,附加方式 scroll:滚动; fixed:固定 */ /* scroll:背景图会随着内容滚动 fixed:背景图固定,内容滚动背景图位置不动 */ background-attachment: sroll; }
元素的显示方式
有三种
- 块元素:div,h1-h6,p 等
- 独立占用行,可以设置宽高
- 行内元素:span,b,i,u,label等
- 不独立占用一行,和其他文本混合在一行,不能设置宽高!!!
- 行内块元素:
- 不独立占用行,和其他文本混合在一行,可以设置宽高!!!
利用CSS可以更改元素的显示方式,从行内显示方式更改为块(行内块)元素==>为了设置元素的宽高,进行布局占位
盒子模型回顾+练习
- 宽高:width,height
- 外边距:margin距相邻元素或上级元素的距离
- 边框:元素的边框
- 内边距:内容距离边框的而距离
粘连问题:
元素的上边缘与上级元素的上边缘重叠时,此时给元素添加上外边距会导致上级元素联动的效果,给上级元素添加overflow:hidden属性
移动元素的两种方式:
- 给上级元素添加内边距,会影响上级元素的宽高
- 给元素自身添加外边距,推荐
行内元素的
- 行内元素的宽高只受内容影响,宽高没有效果
- 外边距的上下没有效果
- 边框:四个边框都会有效果,但是左右边框占显示范围,即影响元素的宽,上下边框不占显示范围
-
内边距:四个方向都生效,但是左右内边距会占显示范围,上下内边距不占显示范围
- 宽高:无效果
- 外边距:上下没效果
- 边框:上下不占显示范围
- 内边距:上下不占显示范围
相邻两个元素,左右外边距是相加,上下外边距是取最大值
定位
如何设置元素的显示位置
-
文档流定位(静态定位i)==>浏览器中元素的默认定位==position:static
- 块元素流定位:从上到下依次显示
- 行内元素流定位:从左至右依次显示
-
相对定位==position:relative;
- 不会脱离文档流,相对于初始位置
-
绝对定位==position:absolute;
- 脱离文档流,相对于窗口或者祖先元素中做过非static定位的元素(一般使用relative,因为其他会导致脱离文档流,影响其他元素的显示效果)
-
固定定位==position:fixed;
- 脱离文档流,上下左右的值相对于窗口;
-
浮动定位==float:left/right
- 脱离文档流,元素可以在当前躲在行的左侧或者右侧浮动,当撞到父元素的边框或者另一个浮动的元素时停止,如果一行装不下,则自动换行,换行时可能会出现被卡住的现象;
- 当所有子元素全部浮动的话,自动识别的高度为0 ,通过overfloat:hidden解决此问题
- 当纵向排列的元素需要改成横向排列的时候使用浮动定位
利用CSS可以更改元素的定位属性,实现调整元素的显示位置
浮动定位
属性;float;值:left/right
现象:文字自动绕排,不回被遮挡
清除浮动影响
- clear:both
行内元素的垂直对齐方式
- vertical-align:top/middle/bottom/baseline(默认)====垂直对不齐的问题
扫一扫
2206
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
