CSS基础(上)
1.个性表格:http://www.runoob.com/try/try.php?filename=trycss_table_fancy
2.没有表格的网页:http://www.runoob.com/try/try.php?filename=trycss_float6
CSS全称为“层叠样式表”,它主要用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。
1.CSS样式:由选择符和声明组成,声明又由属性和值组成
2.在CSS中,用/*注释语句*/
来标明
3.CSS样式代码插入的形式有3种:内联式、嵌入式、外部式
内联式:<p style="color:red" ;(分号) font-size:12px >这里文字是红色</p>
嵌入式:(适用于多个地方的设置)
外部式:(简化繁杂代码)
4.选择器:指部分中在{}之前的部分,选择器指明了{}中的样式的作用对象,也就是样式作用于网页中的哪些元素。
选择器{
样式;
}
5.类选择器:(语法为) .类选择器名称{css样式代码;}
6.ID选择器:很多方面,ID选择器都类似于选择符,但也有一些重要的区别:
为标签设置id=“ID名称”,而不是class=“类名称”
ID选择符的前面是井号(#)号,而不是英文圆点(.)。
一个元素的id应该是唯一的。另一个元素不应该重复使用
7.类选择器和ID选择器的区别(但均可用于任何元素):
ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次
可以使用类选择器词列表方法为一个元素同时设置多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的
<span id="stress bigsize">....</span>
这是不正确的
8. 子选择器,即大于符号(>),用于选择指定标签元素
9.包含(后代)选择器:
.first span{color : red;}
10.通用选择器:
11. 伪类选择器:给不存在的标签设置样式,比如说给html中的一个标签元素的鼠标滑过的状态来设置字体颜色
12. 分组选择符:为html中多个标签元素设置同一个样式时,可使用分组选择符(,)如:
.first,#second span{color:green;}
13.继承(若某种颜色应用于p标签,即该设置仍可应用于p标签中的所有子元素文本)
特殊性:若为同一个元素设置了不同的CSS样式,则根据权值来判断使用哪种CSS样式【标签p的权值为1,类选择符的权值为10,ID选择符的权值为100】
层叠:(CSS样式具有相同权重值时)根据样式的前后顺序来决定,取决于最后面的CSS样式
重要性:使用!important设置具有最高权值(p{color:red!important ;)
14.1 背景
背景颜色:background_color p.gray {background-color: gray;}
图片做背景:
div#test
{
background-image:url(/study/background.jpg);
width:200px;
height:100px;
}
背景重复:
background-repeat属性值可以选
repeat; 水平垂直方向都重复
repeat-x; 只有水平方向重复
repeat-y; 只有垂直方向重复
no-repeat; 无重复
背景平铺:
<style>
div#contain
{
background-image:url(/study/background_small.jpg);
width:200px;
height:100px;
background-size: contain;
}
</style>
<div id="contain">
背景平铺,通过拉伸实现,会有失真
</div>
14.2 文字排版
字体:body{font-family:“微软雅黑”;}
字号、颜色:body{font-size:12px;color:#666}
粗体:p span{font-weight:bold;}
斜体:p a{font-style:italic;}
下划线:p a{text-decoration:underline;}
删除线: .oldPrice{text-decoration:line-through;}
缩进:p{text-indent:2em;}
行高:p{line-height:1.5em;}
中文字间距、字母间距:h1{letter-spacing:50px;}
单词间距:h1{word-spacing:50px;}
对齐:(居中)h1{text-align:center;} (居左)h1{text-align:left;} (居右)h1{text-align:right;}
文本修饰:属性:text-decoration
<style type="text/css">
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration:blink}
.a {text-decoration: none}
</style>
<h1>上划线</h1>
<h2>删除效果</h2>
<h3>下划线</h3>
<h4>闪烁效果,大部分浏览器已经取消该效果</h4>
<a href="http://how2j.cn/">默认的超链</a>
<a class="a" href="http://how2j.cn/">去掉了下划线的超链</a>
大小写:属性:text-transform
值:
uppercase 全部大写
capitalize 首字母大写
lowercase 全部小写
空白格:属性:white-place
值:
normal—默认。多个空白格或者换行符会被合并成一个空白格
pre—有多少空白格,显示多少空白格,相当于pre标签,如果长度超出父容器也不会换行。
pre-wrap ----有多少空白格,显示多少空白格,相当于pre标签,如果长度超出父容器,会换行。
nowrap ----一直不换行,直到使用br
鼠标样式:
<style>
span{
cursor:crosshair;
}
</style>
<span>鼠标移动到这段文字上,就看到鼠标样式变成了十字架</span>
14.3表格
表格布局:属性:table-layout
automatic–单元格的大小由td的内容宽度决定
fixed–单元格的大小由td上设置的宽度决定
注:只对连续的英文字母起作用,如果使用中文就看不到效果
表格边框:属性:border-collapse
separate–边框分隔
collapse–边框合并
边框风格:属性: border-style
solid: 实线
dotted:点状
dashed:虚线
double:双线
边框颜色:属性:border-color
边框厚度:属性:border-width
只有一个方向有边框:
eg:border-top-style:solid;
border-top-color:red;
border-top-width: 50px;
有交界的边都有边框: 当有交界的边同时出现边框的时候,就会以倾斜的形式表现交界线。
14.4 链接
超链状态有4种
link - 初始状态,从未被访问过
visited - 已访问过
hover - 鼠标悬停于超链的上方
active - 鼠标左键点击下去,但是尚未弹起的时候
14.5隐藏
使用display:none; 隐藏一个元素,这个元素将不再占有原空间 “坑” 让出来了
使用 visibility:hidden;隐藏一个元素,这个元素继续占有原空间,只是“看不见”
15.元素分类
块级元素:(有<div><p><h1><form><ul><li>
;可通过设置p{display:block;}将其显示为块级元素)
内联元素:(有<span><a><label><strong><em>
;可通过设置p{disaplay:inline;}将元素设置为内联元素)
内联块状元素(有<img><input>
;可通过设置p{display:inline-block;}来显示为内联块状元素)
元素内边距
指的是元素里的内容与边框之间的距离
属性:
padding-left: 左内边距
padding-right: 右内边距
padding-top: 上内边距
padding-bottom: 下内边距
padding: 上 右 下 左
元素外边距
指的是元素边框和元素边框之间的距离
属性:
margin-left: 左外边距
margin-right: 右外边距
margin-top: 上外边距
margin-bottom: 下外边距
16.盒子模型(块状元素)
边框:div{border:2px solid red;}也可只设置任一边框,其他三边都不设置(p{border-bottom/top/left/right:1px solid red;})
宽度和高度:指盒子填充以里的内容范围(width:200px; height:30px;)
填充:元素内容和边框之间的距离(上、右、下、左:div{padding:20px 10px 15px 30px;}
若上右左下均为10px,则为div{padding:10px;}
若上下填充一样为10px,左右一样为20px,则为div{padding:10px 20px;})
边界:元素与其他元素之间的距离(上、右、下、左:div{margin:20px 10px 15px 30px;}
若上右左下均为10px,则为div{margin:10px;}
若上下填充一样为10px,左右一样为20px,则为div{margin:10px 20px;})
注:padding和margin的区别:padding在边框里,margin在边框外
17.CSS布局模型(在网页中,元素有三种布局模型:1.流动模型 2. 浮动模型 3. 层模型)
- 流动模型(默认网页布局模型:从上而下)
【1.块状元素都会在所处的包含元素内自上而下顺序分布 2. 内联元素都会在所处的包含元素从左往右水平分布显示】 - 浮动模型(如div、p、table、img等元素都可以被定义为浮动,实现让两个块状元素一行显示)
【例子:div{float:left(左对齐)/right(右对齐);} 两个元素一左一右在一行显示:#div{float:left;} #div{float:right;}】 - 层模型
【1.绝对定位(相对于浏览器窗口):向右移动100px,向下移动50px,div{position:absolute; left:100px; top:50px;} 2. 相对定位(相对于以前的位置移动,且偏移前内容的位置不变):向右移动100px,向下移动50px,div{position:relative; left:100px; top:50px;} 3.固定定位(fixed,相对于屏幕内的网页窗口)】
18.颜色值:
英文:p{color:red;}
RGB颜色:p{color:rgb(133,45,200);}
十六进制:p{color:#00ffff;}
19.长度值:
像素:px(90像素=1英寸)
em:
20.水平居中
行内元素:text-align:center;
定宽块状元素:
不定宽块状元素:
21. 垂直居中:
(单行文本)通过设置父元素的height和line-height高度一致来实现
(多行文本)使用插入table标签,同时设置vertical-align:middle