Web前端基础——CSS
一、CSS概述
css ( cascading style sheets ) 层叠样式表,可以轻松设置网页元素的显示、位置和格式外,甚至还能产生滤镜,图像 淡化,网页淡入淡出的渐变效果,简而言之,css就是要对网页的显示效果实现与word 一样的排版控制。
DIV+CSS 标准的叫法 xhtml+css //XHTML 指扩展超文本标签语言(EXtensible HyperText Markup Language)。
CSS的好处
1.提高网页的浏览速度,至少50% 的文件尺寸;
2.缩短改版时间将表现与内容分离,只要改几个css就能修改成千上万个网页;
3.将底网站流量,减少带宽占用;
4.更容易被搜索引擎搜到;
5.内容能被更广泛的设备访问;
web 标准
web 标准主要有几部分组成
1.结构(结构标准主要对应的语言是 xhtml)
2.表现(表现标准对应的主要语言是 css)
3.行为(行为标准主要对应的语言是 javascript)
二、CSS的几种设置方式
1.内联样式表 (inline styles)
如果使用内联样式表,建议加上
<meta http-equiv="Content-Style-Type" content="text/css">
//直接把样式写在了元素上
例子:
<div style="color:blue; width:300px;height:90px" >这是div中的内容</div>
2.嵌入样式表
<style type="text/css">
div{
background-color:red;
color:blue;
width:300px;
height:90px;
} p{
font-size:20pt;color:red;font-family:宋体;
text-decoration:underline;
}
</style>
3.外部样式表
把样式写在一个单独的文件中,然后引入
-- style.css 文件 --
h1 {color: green;}
p {margin-left: 200px;} /*注意,20 和 px之间千万别有空格 */
body{
background-image: url("image/lengtu.jpg")
}
-- 在页面中引入 --
<link rel="stylesheet" type="text/css" href="style.css" />
-- 输入样式表 //自己试一下
可以使用@import声明将一个外部样式文件,输入到另一个css文件中,被输入的css文件就成了输入到的文件的一部分,也可以用@import将一个css文件输入到网页文件的<style></style>标签对中,则输入的文件中的样式规则语句就成了<style></style>标签对中的语句
<style type=text/css>
@import url(http://xxx.com/style1.css);
@import url(stylesheets/style2.css);
p{background:green;color:red}
</style>
css 样式的特点
继承 : 网页中的子元素,将继承父元素的样式
层叠: 子元素中的样式会覆盖父元素中的同名样式, 后面的会覆盖前面的
三、样式规则的选择器
1) * 号选择器
* 可以选择全部
// * {margin 0, padding:0 } //所有的边距都为 0,在特定的时候很有用
// table * {margin 0, padding:0 } margin 指的是外边距
/* margin 的说明:*/
margin: 0px 0px 0px 0px 它的顺序是 上, 右 下 左
margin: 0px 0px 顺序是 上下 和 左右
margin: 0px 10px 10px ,三个参数,第一个用于上,第二个用于左右,第三个用于下
body {....} 这个选择器,如里面有 h1 什么的,它还控制不了这些东西的字体.但 * 可以
*{ color:blue }
2) html 标签选择器
div{color:red}
h1{...}
table{...}
3) id 选择器
#userName { color:pink; font-size:30px;
}
4) class 选择器
将一组css样式写在一起,起个名字(就是class名称),然后在元素上引用
.cry{
background-color:silver;
border-style:double;
font-size:40px;
border-color:blue;
}
<p class="cry"> //注意,引入的时候,名称前面不要加 .
这是断落中的内容
</p>
<div class="cry">
这是div中的内容
</div>
例子: css 的一种常见写法
p.stop{
color:red;
} p.warning{
color:yellow;
} p.normal{
color:green;
} div.glad{
background-color:red;
} <p class="stop">aaa</p>
<p class="warning">bbb</p>
<p class =normal>ccc</p> <div class="glad">这是div</div>
例子,同一个元素,有多个class
.blueone{
color:blue;
font-size:5px
} .bigone{
font-size:90px; --如果有冲突,以这个(后面写的)为准
}
<p class="bigone blueone"> //注意,中间用空格分开,如果两个类中有冲突的地方,以css文件中,后面写的那个为准
这个断落有多个class
</p>
经验:css命名 ,尽量按功能命名,不要按具体内容命名选择器的优先级 id > class > html
5) 属性选择器
只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择
例子
[title] //所有带title 属性的都被选中
{
color:green;
}
<a href="x" title="这是title" >test</a> //只有它被选中
<a href="x" >test</a>
例子
a[href] {color:red;} //只有带 href的a 标签被选中
例子
[title=W3School] //可以有多种写法 title~=hello
{
border:5px solid blue;
}
例子,控制表单中的按钮和text文本框
input[type="text"] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
font-family: Verdana, Arial;
} input[type="button"] {
width: 120px;
margin-left: 35px;
display: block;
font-family: Verdana, Arial;
} <form>
<input type="text" name="Name" value="Bill" size="20" />
<input type="text" name="Name" value="Gates" size="20" />
<input type="button" value="提交" />
</form>
在上面的基础上扩充
=== 关联选择器
1) 后迭代选择器
p em{
color:red;
}
ul li a{ /*不管后面的内容在第几级,都会被选中 */
font-size:50px;
} <p>
刚才幸运抽大奖中奖者是 <em> 贵</em>
</p>
<em> 贵</em> //这个em不会被选中
<ul>
<li><a href="" >这是a标签</a></li>
<li><a href="" >这是a标签</a> </li>
</ul>
2) 子元素选择器
不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素
h1 > strong {color:red;} //选择直属于父级的
<h1> 这是<strong>very</strong> <strong>very</strong> 重要内容</h1> //这两个strong中的内容变红
<h1>这是<em>really <strong>very</strong></em> 重要内容</h1> //由于这里的两个 strong 属于emp内的,所以不变红
附:本例在 ie 6 下无效,ie8有效
3) 选择相邻兄弟
例子
h1 + p {margin-top:50px; color:red} <h1>我是h1</h1>
<p>我是h1的兄弟</p> //这一行将被选中
<p>我是打酱油的</p>
<p>我是打酱油的</p>
<p>我是打酱油的</p>
例子
li + li {font-weight:bold;}
<ul>
<li>List item 1</li>
<li>List item 2</li> //被选中
<li>List item 3</li> //被选中
</ul>
<ol>
<li>List item 1</li> //它不会被选中,因为它不是上面li 的相邻兄弟
<li>List item 2</li> //被选中
<li>List item 3</li> //被选中
</ol>
组合选择器 (最大特点,逗号分开)
可以在一条规则样式语句中组合若干个选择器,每个选择器之间用逗号分开, 例如 H1,H2,H3,H4,H5,H6,TD{color:red} //将所有的标题,和td 内容的颜色都定义为红色。
p,div,.waring{属性名:属性值}
h1,h2,h3, #divContent strong {color:red}
h1.waring ,#content h1{...}
如果有多个 类 /id 选择器,它们有相同的部分,可以把相同的css放在一起
例子:
.redone{
border-color: red;
border-style: solid;
} .blueone{
border-color: blue;
border-style: solid;
} .redone,.blueone,#p1{
font-size: 50px; //所以有字体都变成大的
} <div class="redone">bigone</div>
<div class="blueone">bigone</div>
<p id="p1">p1</p>
伪元素选择器
对同一个HTML 元素的各种状态和其所包括的部分内容的一种定义方式。
例如: 对超链接的正常状态,访问过的,选中状态,当标滑过的状态 ,对段落的首字母和首行,都可以使用伪元素选择器
格式
HTML 元素 伪元素 {属性:值}
常用的伪元素
a:active 选中超链接时的状态
a:hover 光标移到超链接上的状态
a:link 正常状态
a:visited 访问过的超链接的状态
P:first-line 段落中的第一行文本
P:first-letter 段落中的第一个字母
//块级元素的都有效
//一个普通html元素,只要设置了with height 则就成为块级元素
//最容易让人想到的是div
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF text-decoration: underline;} /* 鼠标移动到链接上 */
a:active {color: #0000FF text-decoration: underline;} /* 选定的链接 */
L-V-H-A 这个顺序一定要保证
例子 创建链接框
a:link,a:visited {
font-weight: bold;
font-size: 14px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
background-color: #98bf21;
width: 120px;
text-align: center;
padding: 4px;
text-decoration: none;
} a:hover,a:active {
background-color: #7A991A;
}
<a href="/index.html" target="_blank">W3School</a>
例子:
给文本框得到焦点的时候,设置背景 (这个例子对IE6,IE7无效,火狐好使),如果已规定 !DOCTYPE,那么 Internet Explorer 8 (以及更高版本)支持 :focus 伪类。
<label>姓名<input type=text /></label>
<label>密码<input type=text /></label> input{
width:200px;
height:50px;
border:solid gold;
vertical-align:middle;
padding-left:20px; //里面的文字不要顶格
} nput:focus{ //这是一个伪类
background:pink;
}
四、样式规则的注释和有效范围
1.样式规则的注释
/* */ 不能嵌套
2.样式规则的继承
所有嵌套在某个HTML标签中的HTML 标签都会继承外层标签设置的样式规则
比如body 标签的字体颜色,会被里面的继承,但有一些也不继承
3.样式规则的优先级
从上到下,从整体到局部,从外屋到里层
ID 覆盖 class ,class 覆盖 Html元素选择器
内联样式表>嵌入样式表>外部样式表
五、样式属性详解-背景
Css 样式属性非常多 大体可以分为以下几类
背景 文本 字体 链接 列表 表格 轮廓
1.background-color 可以设置颜色外,还可以设置 transparent //透明
例子
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent} /* 透明 */
p {background-color: rgb(250,0,255)} p.no2 {background-color: gray; padding: 20px;} <h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<p>这是段落</p>
<p class="no2">这个段落设置了内边距。</p>
2.backbround-image
body{
background-image:url(image/lengtu.jpg) /*可以是网络地址*/
}
p.flower {background-image: url(dog.gif); padding: 20px;}
a.radio {background-image: url(/i/eg_bg_07.gif); padding: 20px;}
3.background-repeat //设置背景图象是否重复,及重复方式
no-repeat //背景图象只出现一次,不重复
repeat //水平和垂直重复,这是默认值
repeat-x
repeat-y
4.background-attachment:用于确定背景图象是否跟随内容的滚动而滚动
fixed:固定
scroll:图象跟随内容的移动而移动 (默认)
例子
background-image:url(lengtu.jpg);
background-repeat:no-repeat;
background-attachment:fixed <body>
<p>图像不会随页面的其余部分滚动。</p>
.... 很多行
<p>图像不会随页面的其余部分滚动。</p>
5.background-position : 背景图象的水平位置和垂直位置
取值:
center
top
bottom
right
left
也可以用百分比:
background-position:50% 50%;
background-position-x:50px
background-position-y:50px
也可以用象素值 // background-position: 50px 100px; (实测ie6 不支持)
例子
background-image:url(image/lengtu.jpg);
background-repeat:no-repeat;
background-attachment:fixed; //对于火狐,或 Opera 必须要加这个属性,下面的这句才好用
background-position:center
6.background: 是前面几个background 的综合
TABLE{ background:red url(logo.jpg) no-repeat bottom right }
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;
六、样式属性详解-文本
word-spacing 设置单词之间的间距,设置值可以是前面 表示字体大小的那些单位
例子
p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;} //可以是负值 <p class="spread">This is some text. This is some text.</p>
<p class="tight">This is some text. This is some text.</p>
letter-spacing 设置每个字符之间的间距
例 :
letter-spacing:20px 也可以用 em等
vertical-align 指定文本的垂直对齐方式
取值可以是:
sub 下标
super 上标
top 顶端对齐
middle 居中
bottom
相对于行高属性的百分比
--text-align 属性规定元素中的文本的水平对齐方式 ,取值:left center right justify
例子:
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
例子 justify 两端对应
.box1 {
width: 500px;
line-height: 20px;
margin: 10px auto;
background-color: #cdd;
text-align: justify
} .box2 {
width: 500px;
line-height: 20px;
margin: 10px auto;
backgrsound-color: #cdd;
text-align: left;
} <div class="box1">There is clearly a need for CSS to be taken 好多好多行.. 好多行 </div>
<div class="box2"> ... </div>
text-ident 设置文本的第一行的缩进值,如果设置为负值,就是将文本的第一行拉出
// p {text-indent: 1cm} 就是首行缩进, 也可以用 px,可以用 %
//一般来说,可以为所有块级元素应用 text-indent,但无法将该属性应用于行内元素(实测ie可以,火狐不可以)
white-space 设置如何处理文本中的空白元素
normal 正常,将所有的空白压缩,多个空格剩一个
pre 和 pre 标签一样
nowrap 指定文本不换行,只有遇到了br 标签的时候才换 //和 nobr 标签一样
line-height 设置文本所在行的行高,可以是一个精确的值跟一个单位,也可以是一个百分比
text-transform
取值
none
uppercase //全大写
lowercase //全小写
capitalize //首字母大写
例子
p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}
p.capitalize {text-transform: capitalize} <p class="uppercase"> china </p> //CHINA
<p class="lowercase"> china </p> //china
<p class="capitalize"> china </p> //China
text-decoration
取值
none
underline
overline
line-through
blink
七、样式属性详解-字体
由于 h 元素拥有确切的语义,因此请您慎重地选择恰当的标签层级来构建文档的结构。因此,请不要利用标题标签来改变同一行中的字体大小。相反,我们应当使用层叠样式表定义来达到漂亮的显示效果。
font-family :字体名称,可以设置多个,用逗号分隔
// h1 {font-family: Georgia;} 如果字体名称中间有空格则可以用单引号
font-size : 字体大小
相对大小的设置可以为 larger 或smaller
绝对单位 px mm cm in pt pc
相对单位 em , %
例子:
在所有浏览器中,可以显示相同的文本大小,并允许所有浏览器缩放文本的大小
body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}
font-style
normal - 文本正常显示
italic - 文本斜体显示 // p{font-style:italic}
oblique - 文本倾斜显示
font-weight :指定粗体字的大小
normal
bold
bolder
font-variant: 控制大写按小写的大小显示
normal
small-caps //本来是大写,结果显示的小
例子
p.normal {font-variant: normal}
p.small {font-variant: small-caps} <p class="normal">This is a paragraph</p>
<p class="small">This is a paragraph</p>
font (综合上前面的全部)
例如 P{font:italic bold 12pt Times,serif}
相当于同时设置了上面的好几个属性
八、样式属性详解-表格
表格边框
table, th, td {
border: 1px solid blue;
}
折叠边框 (可以实现细线表格)
table, th, td { border-collapse:collapse;}
宽度和高度
table{
width:100%;
height:50px;
}
表格文本对刘
text-align 水平对齐方式
vertical-align 垂直对齐方式
td {
height:50px;
vertical-align:bottom;
}
表格的内边距
td {
padding:15px;
}
表格颜色
table, td, th {
border:1px solid green;
} th{
background-color:green;
color:white;
}
表格格间距 如果有 !DOCTYPE,那么 Internet Explorer 8 以及上可支持,实测ie6不支持
table.two {
border-collapse: separate;
border-spacing: 10px 50px
}
空的格子是否显示出来
empty-cells: show; (或hide) 如果已规定 !DOCTYPE,那么 Internet Explorer 8 以上支持
table-layout 属性用来显示表格单元格、行、列的算法规则 automatic,fixed
table.one{
table-layout: automatic
}
table.two{
table-layout: fixed
} <table class="one" border="1" width="100%">
<tr>
<td width="20%">1000000000000000000000000000</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table> <table class ="two" > ...</table>
综合示例 表格
#table1 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
width: 100%;
border-collapse: collapse;
} #table1 td,#table1 th {
font-size: 1em;
border: 1px solid green;
padding: 3px 7px 2px 7px;
} #table1 th {
font-size: 1.1em;
text-align: left;
padding-top: 5px;
padding-bottom: 4px;
background-color: #A7C942;
color: white;
} #table1 tr.alt td {
color: #000000; /*这是黑色*/
background-color: #EAF2D3;
} <table id="table1">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr> <tr>
<td>Apple</td>
<td>Steven Jobs</td>
<td>USA</td>
</tr> <tr class="alt">
<td>Baidu</td>
<td>Li YanHong</td>
<td>China</td>
</tr> <tr>
<td>Google</td>
<td>Larry Page</td>
<td>USA</td>
</tr> <tr class="alt">
<td>Lenovo</td>
<td>Liu Chuanzhi</td>
<td>China</td>
</tr> <tr>
<td>Microsoft</td>
<td>Bill Gates</td>
<td>USA</td>
</tr> <tr class="alt">
<td>Nokia</td>
<td>Stephen Elop</td>
<td>Finland</td>
</tr>
</table> </talbe>
九、样式属性详解-列表
list-style-type 用于指定目录列表项标记的样式
实心圆 disc
空心圆 circle
方块 square
阿拉伯数字 decimal
lower-roman 小写罗马数字
upper-roman 大写罗马数字
lower-alpha 小写英文字母
upper-alpha 大写英文字母
none 无项目符号
例子
ul li {
list-style-type:circle
}
list-style-image 用于设置标记的图象
例子
ul li {
list-style-image:url(image/dot.bmp)
}
注意,不要加 list-style-type:circle 之类的了,要不然不好使
list-style-position 用于设置列表标记显示在文本内,还是文本外 //设置值 inside outside
outside的
//效果
*aaa
aaa
*aaa
inside 的
//效果
aaa
*aaa
aaa
list-style 综合前面全部的 //li {list-style : url(lengtu.jpg) inside}
综合实例
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul> ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
} li {
float: left;
} a:link,a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #bebebe;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
} a:hover,a:active {
background-color: #cc0000;
} -- line-height 行高
line-height:150% = line-height:1.5em p{line-height:1.5em} 或 line-height:150% <p>
喜欢Java<br />
喜欢编程<br />
喜欢大自然<br />
喜欢宅在家里<br />
</p>
十、样式属性详解-定位
CSS 有三种基本定位机制 普通流,浮动,绝对定位
定位属性 一共9个
--position
--top
--right
--bottom
--left
--overflow
--clip //把图片切下来一部分
img{
position:absolute;
clip:rect(0px,50px,200px,0px)
}
--z-index //设置元素的层叠顺序,值越大,越往上
--vertical-align
- baseline 默认
- sub
- super
- top //把元素的顶端与行中最高元素的顶端对齐
- text-top //把元素的顶端与父元素字体的顶端对齐
- middle
- bottom
- text-bottom
- length
- %
例子 本例火狐中有效
img.top {vertical-align:top}
img.bottom {vertical-align:bottom}
img.middle {vertical-align:middle}
<p>
这是一幅<img class="top" src="lengtu.jpg" />位于段落中的图像。
</p> <p>
这是一幅<img class="bottom" src="lengtu.jpg" />位于段落中的图像。
</p> <p>
这是一幅<img class="middle" src="lengtu.jpg" />位于段落中的图像。
</p>
例子 z-index
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1; /*默认是0,-1表示拥有更低的优先级*/ } #select1{
z-index:-100; //可以发现,对于下拉框,不管怎么设置z-index,它都是压不住的
} <h1>这是一个标题,,它将压在图片上</h1>
<img class="x" src="data:image\lengtu.jpg" />
<select id="select1">
<option>aaa</option>
<option>aaa</option>
</select>
十一、position 属性详解
absolute: 绝对定位,元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。
元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
relative: 相对定位,所设置的定位值是相对于元素通常在的位置的一个偏移量 ,元素仍保持其未定位前的形状,它原本所占的空间仍保留。
static: 元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
fixed: 元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
例子 相对定位
h2.pos_left {
position: relative;
left: -20px
} h2.pos_right {
position: relative;
left: 20px
} <h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
例子 绝对定位
h2.pos_abs {
position: absolute;
left: 100px;
top: 150px
}
例二
<div style="position: absolute ; width:50px;height:50px; background:pink; left:150px;top:180px "> </div>
例子 fixed 定位 ie6,7,8 不支持
.div1{ width:2000px;
height:2000px;
} .div2{
background-color:#33FF66;
width:100px;
height:100px;
position:fixed;
left:50px;
top:50px;
} .ie{ //这是为了兼容ie写的
_position: absolute;
_clear: both;
_top:expression(eval(document.compatMode &&document.compatMode=='CSS1Compat')?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight) - 1 : document.body.scrollTop +(document.body.clientHeight-this.clientHeight) - 1);
} <div class="div1">层1</div>
<div class="div2 ie">层2</div>
例子 overflow
--scroll 如果设置这个属性,即便内容很少,框内能装下,也会出现滚动条
--visible 如果设置了这个属性,将会把多余的内容也显示出来(可能会撑大div),但不会出现滚动条
--auto 根据情况,如果需要出现就会出现
--hidden 超出了也不出现
div {
background-color: pink;
width: 150px;
height: 150px;
overflow: scroll //如果设置这个属性,即便内容很少,框内能装下,也会出现滚动条
} <div>这个属性定义溢出元素内容区的内容会如何处理。如果值为scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
</div>
十二、样式属性详解-浮动(属于定位)
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。浮动可以理解为让某个div元素脱离标准流,漂浮在标准流之上,和标准流不是一个层次。
例一
img {
float:right //在下面的段落中,我们添加了一个样式为 <b>float:right</b> 的图像。结果是这个图像会浮动到段落的右侧,有点象环绕的效果
} <p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
...
<img src="lengtu.jpg" />
</p>
例二
<div style="width:500px;height:500px;background:silver;">
<div style="width:50;height:50;background:green;float:left">1</div> //如果象float,则在火狐中,最终看到的是1(上)3(下) 2被压住了看不到,但在ie中不同
<div style="width:50;height:50;background:yellow">2</div>
<div style="width:50;height:50;background:pink">3</div>
</div>
例三,带清除浮动的
#div1{
width:200px;
height:80px;
background:red;
} #div2{
width:500px;
height:60px;
background:springgreen;
float:left;
opacity:0.4;
filter:alpha(opacity=40);
} #div3{
width:100px;
height:100px;
background:yellow;
clear:left; /*清除浮动 其他选项 right, both*/
} #div4{
width:300px;
height:70px;
background:lightskyblue;
}
<div id=div1> div1 </div>
<div id=div2> div2 </div>
<div id=div3> div3 </div>
<div id=div4> div4 </div>
十三、 样式属性详解-其他
1) 光标
--cursor
pointer 手型,crosshair 十字型, text I型, wait 等待,default,help,e=resize 东箭头,ne-resize 东北箭头
n=resize 北箭头,nw-resize 西北箭头,w-resize 西箭头, sw-resize 西南箭头,s-resize 南箭头 se-rize 东南箭头 auto 自动
2) 半透明
img{
opacity:0.4;
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
}
//注意,它也可以用在 div 的背景色上
3) 块元素和行内元素
行内元素 (inline element) 又叫内联元素。内联元素只能容纳纯文本或其他内联元素,常见的内联元素元<span > <a> //注意和浏览器有关,到ie8以后,它也什么都能放。
块元素(bolck element)
块元素一般都从新行开,可以容纳文本,其他内联元素和其他块元素,即使内容不能占满一行块元素也要把行占满,常见的块元素<div> <p> <li>
.menu{ }
<div class="menu">div</div> //占满一行
<ul class="menu">
<li>sss</li> //占满一行
<li>sss</li>
</ul>
说明,对于
<div class="menu">div1</div>
<div class="menu">div2</div> 如果指定了 width:100px,虽然div变小了,但它依然是独占一行,后面就算写个span,它依然要占一行,有一些css属性,对行内元素不生效 比如 margin,left ,right, width,height, 和浏览器版本有关,请尽可能使用块元素定位
* 块元素和行内元素可以互相转换
display:inline 转为行内元素(比如div)
display:block 转为块元素,比如 a
比如上面的.menu 中加入 display: inline; 则它们不占满一行了
附: display 的取值 还有很多, 比如 none
十四、框模型 (Box Model)
1)盒子模型
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
w3c 建议把网页上的所有内容都放到一个盒子里,设计师可以通过创建定义来控制这个盒子的属性,这些对象包扩段落,列表,标题,图片,及层盒子模型主要定义四个区域。
1.盒子中的内容 :content
2.盒子的边框 :border
3.盒子与内容之间的添充 : padding (内补丁)
4.如果有多个盒子,盒子与盒子之间的距离 :margin (外补丁)
整个盒子模型在面页中占用的宽度是由
左边界+左边框+左填充+内容+右填充+右边框+右边界 组成
2)内边距
padding 属性接受长度值或百分比值,但不允许使用负值。
h1 {padding: 10px;}
h1 {padding: 10px 0.25em 2ex 20%;}
=========等价于============
h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
3)外边距
p.margin {margin: 2cm 4cm 3cm 4cm} <p>这个段落没有指定外边距。</p> <p class="margin">这是一段文本...</p> <p>这个段落没有指定外边距。</p>
4)边框
每个边框有 3 个方面:宽度、样式,以及颜色
---border-width(border-top-width,border-right-with,border-bottom-width,border-left-with)
// 用于设置元素边框的宽度,设置值可以是 thin medium thick 或数值
---border-color(border-top-color ... )
---border-style(border-top-style ...) // none,dotted,dashed(虚线),solid,double,groove(凹槽线),ridge(凸槽线),inset(凹边),outset(凸边)
// border-style 的默认值是 none,如果没有声明样式,就相当于 border-style: none。因此,
// 如果您希望边框出现,就必须声明一个边框样式。
---border(border-top,border-right,border-bottom,border-left) //综合了前面的几个
//例子: 给超链接加一个激活时的边框
A:active {border:thick double red}
布局例子:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#container{
width:800px;
margin:0 auto; /*这个设置水平居中*/
background:lightskyblue;
} #header{
height:80px;
background:springgreen;
padding-top:20px;
} #logo{
width:60px;
height:60px;
background:gold;
margin-left:50px;
} #content{
/* height:500px; */ //尽量不要在这里设置行高
overflow:auto;
margin-top:10px;
background:#DDEE22
} #content-left {
height:400px;
width:20%;
background:silver;
margin:20px;
float:left; } #content-right {
height:400px;
width:72%;
float:left;
margin:20px;
margin-left:0px;
background:orange;
} #footer{
height:90px;
background:#3A6EA5;
text-align:center;
vertical-align:center; /*没起作用*/
font-size:12px;
color:white; line-height:90px; /*把lin-height 调整成和行高一样,可以居中*/
} .clear{
clear:both;
}
</style> </head> <body>
<div id="container">
<div id="header">
<div id="logo" >这是logo</div>
</div> <div id="content">
<div id="content-left">这是左边</div>
<div id="content-right">这是右边</div>
</div> <div class ="clear"><div>
<div id="footer"> 这是一些版权信息 </div>
</div>
</body> </html>
十五、盒子模型经典案例
//例一
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body{
border:1px solid red;
height:1000px;
width:700px;
margin:0 auto;
} div{
border:1px solid #2929FF;
margin-top:20px;
margin-left:50px;
width:350px;
height:270px;
/*
padding-top:30px;
padding-left:20px 也可以,但会撑大 */
} div img{
margin-top:30px;
margin-left:20px;
}
</style>
</head> <body>
<div>
<img src="head.gif">
</div>
</body>
</html>
例二
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div{
border:1px solid red;
width:700px;
height:800px;
margin:0 auto;
} ul{
margin:0;
padding:0;
width:600px;
height:700px;
margin-top:20px;
margin-left:17px;
border:1px solid blue;
} ul li{
border:1px solid deeppink;
width:100px;
height:120px;
list-style-type:none;
float:left;
margin-left:10px;
margin-top:20px;
} ul li img{
width:80px;
height:100px;
margin: 10px; } </style>
</head> <body>
<div>
<ul>
<li><img src="cat.gif"></img></li>
<li><img src="cat.gif"></img></li>
<li><img src="cat.gif"></img></li>
<li><img src="cat.gif"></img></li>
<li><img src="cat.gif"></img></li>
<li><img src="cat.gif"></img></li>
<li><img src="cat.gif"></img></li>
<li><img src="cat.gif"></img></li>
<li><img src="cat.gif"></img></li>
<li><img src="cat.gif"></img></li>
<li><img src="cat.gif"></img></li>
<li><img src="cat.gif"></img></li> </ul>
</div>
</body>
</html>
注意:
table td:first-child{background-color:#ff0000; color:#000000;} 可以选第一列
或 table tr td:nth-child(1) {background-color:#ff0000; color:#000000;} 可以指定选第几列
Web前端基础——CSS的更多相关文章
- Web前端温故知新-CSS基础
一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- 进击的Python【第十三章】:Web前端基础之HTML与CSS样式
进击的Python[第十四章]:Web前端基础之HTML与CSS样式 一.web框架的本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客 ...
- web前端基础知识及快速入门指南
web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...
- 进击的Python【第十六章】:Web前端基础之jQuery
进击的Python[第十六章]:Web前端基础之jQuery 一.什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多&quo ...
- 好程序员web前端分享css常用属性缩写
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...
- 前端基础——css
前端基础——css css的内容主要包括:盒子模型.定位.单位与取值.属性.选择器.
- Python web前端 02 CSS
Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...
- Python web前端 03 CSS属性
Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
随机推荐
- 【计算机网络】数据交换技术和多路复用技术的正(nao)确(can)打开方式
交换的作用 数据交换是计算机网络中两个终端进行数据传输的方式,它又可以分成两种类型:电路交换和分组交换.很显然,问题的核心在于“交换”,那么我们首先要思考的是:交换的作用是什么? “交换”的作 ...
- .NET Core中使用EF Core连接MySQL
最近一直在捣鼓.NET Core方面的东西,顺便写下点东西记录下 1.打开vs2017,新建一个项目 2.vs会自动生成一个项目,然后打开NuGet搜索MySql.Data.EntityFramewo ...
- Quartz是一个任务调度
这段时间做一个案子,用到每天定时处理事件,之前的解决思路是通过一个定时器轮询时间段,这样不能精准的在某个时间戳上执行动作.由于没有用过Quartz是一个任务调度,一直使用这个办法,今天通过同事提点,从 ...
- 微信小程序导出当前画布指定区域的内容并生成图片保存到本地相册(canvas)
最近在学小程序,在把当前画布指定区域的内容导出并生成图片保存到本地这个知识点上踩坑了. 这里用到的方法是: wx.canvasToTempFilePath(),该方法作用是把当前画布指定区域的内容导出 ...
- Python之lambda匿名函数使用if条件语句
C0LOR1 = "PapayaWhip" COLOR2 = "Tan" selectColor = lambda num: C0LOR1 if num % 2 ...
- centos clamav杀毒软件安装配置及查杀,没想到linux下病毒比windows还多!
centos clamav杀毒软件安装配置及查杀,没想到linux下病毒比windows还多! 一.手动安装 1.下载(官网) cd /soft wget http://www.clam ...
- 插入排序的Java代码实现
插入排序也是一类非常常见的排序方法,它主要包含直接插入排序,Shell排序和折半插入排序等几种常见的排序方法. 1.直接插入排序 直接插入排序的思路非常简单:依次将待排序的数据元素按其关键字值的大小插 ...
- (转)python3-staticmethod与classmethod
原文:https://blog.csdn.net/youngbit007/article/details/68957848 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blo ...
- 详解C#泛型(三)
一.前面两篇文章分别介绍了定义泛型类型.泛型委托.泛型接口以及声明泛型方法: 详解C#泛型(一) 详解C#泛型(二) 首先回顾下如何构建泛型类: public class MyClass<T&g ...
- spring与struts简单整合案例
Spring,负责对象对象创建 Struts, 用Action处理请求 Spring与Struts框架整合, 关键点:让struts框架action对象的创建,交给spring完成! 步骤: 1)引入 ...