RN3_CSS学习
基础概念和简介
简介:
CSS 指层叠样式表 (Cascading Style Sheets),样式定义如何显示 HTML 元素,通常存储在样式表中,把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题,外部样式表可以极大提高工作效率,外部样式表通常存储在 CSS 文件中,多个样式定义可层叠为一。
作用:
HTML 标签原本被设计为用于定义文档内容,如下实例:
<h1>这是一个标题</h1>
<p>这是一个段落.</p>
样式表定义如何显示 HTML元素,就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观。
语法规则:
组成
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:
l 选择器通常是您需要改变样式的 HTML 元素。
l 每条声明由一个属性和一个值组成。
属性(property)是您希望设置的样式属性(styleattribute)。每个属性有一个值。属性和值被冒号分开。
分隔符
CSS声明总是以分号(;)结束,声明组以大括号({})括起来:
p{color:red;text-align:center;}
格式:
为了让CSS可读性更强,你可以每行只描述一个属性:
p
{
color:red;
text-align:center;
}
注释:
CSS注释以 "/*" 开始, 以 "*/" 结束。
CSS的引入方式
插入方式:
插入样式表的方法有三种:
1. 外部样式表
2. 内部样式表
3. 内联样式
外部样式表
应用场景:
样式需要应用于很多页面时,外部样式表将是理想的选择。
使用方式
每个页面使用<link> 标签链接到样式表。<link> 标签在(文档的)头部:
<head>
<link rel="stylesheet"type="text/css" href="mystyle.css">
</head>
浏览器会从文件mystyle.css中读到样式声明,并根据它来格式文档。
内部样式表
应用场景:
当单个文档需要特殊的样式时,就应该使用内部样式表。
使用方式
你可以使用 <style>标签在文档头部定义内部样式表。
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body{background-image:url("images/back40.gif");}
</style>
</head>
内联样式
应用场景:
要将表现和内容混杂在一起,内联样式会损失掉样式表的许优势。(请慎用这种方法)。
使用方式
在相关的标签内使用样式(style)属性
<pstyle="color:sienna;margin-left:20px">This is aparagraph.</p>
多重样式的优先权
1. 外部样式表
2. 内部样式表(位于 <head>标签内部)
3. 内联样式(在 HTML 元素内部)
内联样式(在 HTML 元素内部)拥有最高的优先权
基本语法
Id 和 Class
要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器。
ID选择器
为标有特定 id的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#"来定义。
#para1
{
text-align:center;
color:red;
}
class 选择器
用于描述一组元素的样式,选择器以一个点"."号显示
.center
{
text-align:center;
}
<body>
<h1class="center">标题居中</h1>
<pclass="center">段落居中。</p>
</body>
</html>
注意:class 和ID属性不要以数字开头
Css背景
背景的属性:
l background-color
l background-image
l background-repeat
l background-attachment
l background-position
background-color
定义了元素的背景颜色。
body{background-color:#b0c4de;}
颜色值通常以以下方式定义:
l 十六进制-如:"#ff0000"
l RGB- 如:"rgb(255,0,0)"
l 颜色名称-如:"red"
background-image
描述了元素的背景图像。
body{background-image:url('paper.gif');}
background-repeat
背景平铺方式。
repeat-x:水平平铺。
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
background-position
背景图像的起始位置。
body{background:#ffffff url('img_tree.png') no-repeat right top;}
Csst文本格式
文本基本属性
l 文本颜色
l 文本的对齐方式
l 文本修饰
l 文本转换
l 文本缩进
文本颜色
body{color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
文本的对齐方式
h1{text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
文本修饰
a{text-decoration:none;}
h1{text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
文本转换
p.uppercase{text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
文本缩进
p{text-indent:50px;}
css链接
不同的链接可以有不同的样式。可以用任何CSS属性(如颜色,字体,背景等)。特别的链接,可以有不同的样式,这取决于他们是什么状态。
链接状态:
l a:link -正常,未访问过的链接
l a:visited- 用户已访问过的链接
l a:hover- 当用户鼠标放在链接上时
l a:active- 链接被点击的那一刻
a:link{color:#FF0000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
这里的link,visited,hover,active也可以当做事件来玩
.dropdown:hover.dropdown-content {
display: block;
}
对于设置了dropdown类的属性,在鼠标移动的时候显示(算是一个过滤条件)。
列表
属性作用
1. 设置不同的列表项标记为有序列表
2. 设置不同的列表项标记为无序列表
3. 设置列表项标记为图像
不同的列表项标记
ul.a{list-style-type:circle;}
ul.b{list-style-type:square;}
ol.c{list-style-type:upper-roman;}
ol.d{list-style-type:lower-alpha;}
ul{list-style-image: url('sqpurple.gif');} 图片标记
表格
常用属性:
l 表格边框
l 折叠边框
l 表格宽度和高度
l 表格文字对齐
l 表格填充
l 表格颜色
表格边框
table, th, td
{
border: 1px solid black;
}
折叠边框
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
表格宽度和高度
table
{
width:100%;
}
th
{
height:50px;
}
表格文字对齐
td
{
text-align:right;
}
表格填充
td
{
padding:15px;
}
表格颜色
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
盒子模型:
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
边框
常用边框属相
l 边框样式
l 边框宽度
l 边框颜色
l 单独设置各边
边框样式
边框宽度
p.one{border-style:solid;
border-width:5px;}
p.two{border-style:solid;
border-width:medium;}
边框颜色:
l name - 指定颜色的名称,如 "red"
l RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
l Hex - 指定16进制值, 如 "#ff0000"
单独设置各边
p{border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;}
轮廓
绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。CSSoutline 属性规定元素轮廓的样式、颜色和宽度。
Margin(外边距)
单边外边距属性
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
简写属性
margin:25px 50px 75px 100px;
l 上边距为25px
l 右边距为50px
l 下边距为75px
l 左边距为100px
margin:25px 50px 75px;
l 上边距为25px
l 左右边距为50px
l 下边距为75px
margin:25px 50px;
l 上下边距为25px
l 左右边距为50px
margin:25px;
l 所有的4个边距都是25px
Padding(填充)
和margin的机制一个尿性,不赘述
分组 和 嵌套 选择器
分组:
h1,h2,p
{
color:green;
}
几个属性的style被并作一个组。
嵌套选择器
适用于选择器内部的选择器的样式。
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
l 为所有p元素指定一个样式
l 为所有class="marked"的元素指定一个样式
l 为所有class="marked"元素内的p元素指定一个样式
Display(显示)
隐藏元素
可以通过把display属性设置为"none",或把visibility属性设置为"hidden"。
visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。
h1.hidden {visibility:hidden;}
display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。
h1.hidden{display:none;}
块和内联元素
块元素是一个元素,占用了全部宽度,在前后都是换行符。
块元素的例子:
l <h1>
l <p>
l <div>
内联元素只需要必要的宽度,不强制换行。
内联元素的例子:
l <span>
l <a>
改变一个元素显示
把列表项显示为内联元素:
li {display:inline;}
下面的示例把span元素作为块元素:
span {display:block;}
Positioning(定位)
许你为一个元素定位。它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么。
四种不同的定位方法
l Static 定位
l Fixed 定位
l Relative 定位
l Absolute 定位
Static 定位
HTML元素的默认值,即没有定位,元素出现在正常的流中。
静态定位的元素不会受到top, bottom, left, right影响。
Fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动:
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
Relative 定位
相对定位元素的定位是相对其正常位置。
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
Absolute 定位
元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>:
h2
{
position:absolute;
left:100px;
top:150px;
}
重叠的元素
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
背景图片是重叠在最下层。
Float(浮动)
会使元素向左或向右移动,其周围的元素也会重新排列。往往是用于图像,但它在布局时一样非常有用。
规则:
l 元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。
l 一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
l 浮动元素之后的元素将围绕它。
l 浮动元素之前的元素将不会受到影响。
.thumbnail{float:left;
width:110px;
height:90px;
margin:5px;}
清除浮动
指定元素两侧不能出现浮动元素。
.text_line{clear:both;}
组合选择符
合选择符说明了两个选择器直接的关系。
四种组合方式:
后代选取器(以空格分隔)
子元素选择器(以大于号分隔)
相邻兄弟选择器(以加号分隔)
普通兄弟选择器(以破折号分隔)
后代选取器
divp{background-color:yellow;}
所有插入到div中的p背景设为黄色。
子元素选择器
div>p{background-color:yellow;}
<div>元素中所有直接子元素 <p> ,就是外面包了其他元素的都不算直接。
相邻兄弟选择器
div+p{background-color:yellow;}
选取了所有位于 <div>元素后的第一个 <p>元素。就是要和div直接相连的p,中间有其他元素间隔开都不行。
普通相邻兄弟选择器
div~p{background-color:yellow;}
所有 <div>元素的所有相邻兄弟元素 <p> :,比相邻居兄弟的条件放开了一些。
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
段落4也算进去。如果是相邻兄弟的话段落4就不能算。
属性选择器和值选择器
具有特定属性的HTML元素样式不仅仅是class和id。我们还可以针对某一属性的某一类值进行对应的显示。
属性选择器
[title]{color:blue;}
把包含标题(title)的所有元素变为蓝色
属性和值选择器
[title=runoob]{border:5pxsolidgreen;}
改变了标题title='runoob'元素的边框样式
属性和值的选择器 - 多值
[title~=hello]{color:blue;}
包含指定值的title属性的元素样式的例子,使用(~)分隔属性和值
[lang|=en]{color:blue;}
包含指定值的lang属性的元素样式的例子,使用(|)分隔属性和值:
<body>
<h2>将适用:</h2>
<plang="en">Hello!</p>
<plang="en-us">Hi!</p>
<plang="en-gb">Ello!</p>
<hr>
<h2>将不适用:</h2>
<plang="us">Hi!</p>
<plang="no">Hei!</p>
</body>