HTML 标签原本被设计为用于定义文档内容,如下实例:
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
样式表定义如何显示 HTML 元素,就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
以下的样式规则应用于元素属性 id=“para1”:
实例
#para1
{
text-align:center;
color:red;
}
class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示:
在以下的例子中,所有拥有 center 类的 HTML 元素均为居中。
实例
.center {text-align:center;}
当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在(文档的)头部:
浏览器会从文件 mystyle.css 中读到样式声明,并根据它来格式文档。外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用
由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。
要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距:
这是一个段落。
如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。
例如,外部样式表拥有针对 h3 选择器的三个属性:
h3
{
color:red;
text-align:left;
font-size:8pt;
}
而内部样式表拥有针对 h3 选择器的两个属性:
h3
{
text-align:right;
font-size:20pt;
}
假如拥有内部样式表的这个页面同时与外部样式表链接,那么 h3 得到的样式是:
color:red;
text-align:right;
font-size:20pt;
即颜色属性将被继承于外部样式表,而文字排列(text-alignment)和字体尺寸(font-size)会被内部样式表中的规则取代。
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中,在 HTML 页的头元素中,或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
一般情况下,优先级如下:
内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式
Property 描述
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
</head>
属性 描述
链接的样式,可以用任何CSS属性(如颜色,字体,背景等)。
特别的链接,可以有不同的样式,这取决于他们是什么状态。
这四个链接状态是:
a:link - 正常,未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
属性 描述
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。
border-style 值:
none: 默认无边框
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。 效果取决于边框的颜色值
属性 描述
border 简写属性,用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
border-width 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
border-color 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。
border-bottom 简写属性,用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性,用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性,用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性,用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。
每个选择器用逗号分隔。
在下面的例子中,我们对以上代码使用分组选择器:
实例
h1,h2,p
{
color:green;
}
在下面的例子设置了三个样式:
p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class=“marked” 的元素指定一个样式。
.marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式。
实例
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
p.marked{
text-decoration:underline;
}
有两个作用
<html>
<head>
<meta charset="utf-8">
<title>change-to-flex</title>
<link rel="stylesheet" href="./reset.css">
<style>
.block{
position:relative;//相对位置
top :10px;//相对顶部10像素
width:
height;
line-height;//线高度
test-align:center;//文本布局
border: 2px solid blue;//边框2像素实线蓝色
box-sizing :border-box;//
}
.block:nth-child(2){//选择第二个block
position:static;
border-color:red;
}
</style>
</head>
<body>
<div class="block">
A
</div>
<div class="block">
B
</div>
<div class="block">
C
</div>
<div class="block">
D
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position-relative</title>
<link rel="stylesheet" href="./reset.css">
<style>
.parent {
width:300px;
height:300px;
background: blue;
}
.parent div {
width: 80px;
height: 80px;
}
.sub-1 {
position:relative;
background: red;
top:20px;
left: 50px;
}
.sub-2 {
background: green;
}
</style>
</head>
<body>
<div class="parent">
<div class="sub-1"></div>
<div class="sub-2"></div>
</div>
<div class=""></div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>absolute</title>
<link rel="stylesheet" >href="./reset.css">
<style>
.parent{
position:relative;
width:200px;
height:200px;
background:red;
}
.sub{
position:absolute;
width:50px;
height;
}
.tl{
top:0;
left:0;
background:green;
}
.tr{
}
.br{
}
.bl{
}
</style>
</head>
<body>
<div class="parent">
<div class="sub tl"></div>
<div class="sub trl"></div>
<div class="sub br"></div>
<div class="sub bl"></div>
</div>
</body>
</html>
sticky 磁贴定位
inherit
.box{
position:relative;
}
z-index;
id选择器//常见
元素选择器//常见
类(class)选择器//常见
属性选择器
元素选择器和类选择器可以复用
在
祖先元素
后代元素
父元素
子元素
兄弟元素
伪元素(虚拟的元素)
::before会为当前元素创建一个子元素作为伪元素
::after 用来匹配以选中月元素的一个虚拟的最后子元素
q::before{
content:"<<";
color:ligthgreen;
}
q::after{
content:">>";
color:lightgray;
}
属性选择器
[title] {
color:lightgray;
}
<style>
html,body{//没有外边界
margin: 0px;
}
header {
background-color:lightblue;
height;150px;
}
#container{
background-color:lightgray;
height:450px;
}
nav {
background-color:lightgreen;
height:100%;
width:150px;
float:left;
}
aside{
background-color:lightcoral;
height:100%;
width:150px;
float:right;
}
article{
background-color:lightgreen;
height:100%l
}
</style>
<header></header>
<div id="container">
<nav></nav>
<aside></aside>
<article>
<p>这是一个段落内容</p>
</article>
</div>
三行两列布局
<head>
<style>
html,body{
margin:0px;
}
#container{
background-color:lightblue;
height:450px;
}
header,footer{
background-color:lightgreen;
height:150px;
}
nav{
background-color:lightcoral;
height:100%;
width:150px;
float:left;
}
article{
background-color:lightslatergray;
height:100%;
margin-left:150px;
}
</style>
</head>
<body>
<header></header>
<div id="container">
<nav></nav>
<article></article>
<footer></footer>
</div>
</body>
参数: left , right, none, inherit
float:inherit 继承浮动(继承父元素的浮动属性)
<style>
.test{
width:100px;
height:100px;
background:red;
float:left;
margin-right:10px;
}
</style>
<body>
<div class="test"></div>
</body>
<style>
.per{
width:400px;
height:400px;
border:1px solid red;
}
img{
float:left;//让图片浮动
}
</style>
<body>
<div class="per">
<img src="logo.png" width="200" alt="">
文字
</div>
</body>
clear:none
clear:left
clear:right
clear:both
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<title>float</title>
<style>
*{
padding:0;//内边距(有颜色)
margin: 0;//外边距(透明)
}
.head{
width:100%;
height:64px;
}
.logo{
width:160px;
heitht:40px;
float:left;
}
.nav{
width:100%;
height:64px;
float:left;
}
.nav-li{
width:80px;
text-align:center;
line-height:64px;
height:64px;
float:left;
}
.icons{
width:320px;
height:64px;
float:right;
}
.i01{
width:64px;
height:64px;
float:left;
background:url("001.png") center center no-repeat;
}
.i02{
width:64px;
height:64px;
float:left;
background:url("002.png") center center no-repeat;
}
.i03{
width:64px;
height:64px;
float:left;
background:url("003.png") center center no-repeat;
}
.i04{
width:64px;
height:64px;
float:left;
background:url("004.png") center center no-repeat;
}
.i05{
width:64px;
height:64px;
float:left;
background:url("005.png") center center no-repeat;
}
</style>
</head>
<body>
<div class="head">
<div class=""logo><img src="logo.png" width="160" height="40" alt="">
</div>
<div class="nav">
<div class="nav-li">实战</div>
<div class="nav-li">路径</div>
<div class="nav-li">猿问</div>
<div class="nav-li">手记</div>
</div>
<div class="icons">
<div class="i01"></div>
<div class="i02"></div>
<div class="i03"></div>
<div class="i04"></div>
<div class="i05"></div>
</div>
</div>
</body>
</html>