您的位置：首页 > Web前端 > CSS

CSS（层叠样式表）

2019-02-28 18:53 24 查看

iframe**

iframe是HTML标签，作用是文档中的文档，或者浮动的框架。iframe 元素会创建包含另外一个文档的内联框架。

<body>
<iframe src="http://www.baidu.com" frameborder="1" width="800" height="500">
</iframe>
</body>

iframe可以设置宽width和高height

CSS(层叠样式表）

1.CSS的概念及其介绍
CSS 指层叠样式表 (Cascading Style Sheets)
作用:美化HTML结构,重点:CSS可以很好的将结构内容和表现进行分离.
外部CSS文件更大的提高工作效力

2.CSS嵌入页面的方式
(1)内联样式：是指通过style属性将样式属性写入到标签之中
color 设置文字的颜色，如： color:red;
font-size 设置文字的大小，如：font-size:12px;
font-family 设置文字的字体，如：font-family:‘微软雅黑’;
line-height 设置文字的行高，如：line-height:24px; (文本的垂直居中)
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉 (overline上划线,underline下划线)
text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进 24px
text-align 设置文字水平对齐方式，如 text-align:center 设置文字水平居中
块元素: 在网页中标签占据一行显示,这类型的元素称之为块元素p/h1
内联元素: 在网页中不会占据一行显示, 默认本身不能设置宽高, 其大小是由标签的内容决定.a标签

(2)内嵌样式：通过style标签将样式嵌入到head中
网页中最常用使用div布局
Div元素/标签:本身没有大小,但可以设置其大小,背景,等
1.标签选择器：是指标签通过元素的标签名字，来选中元素，从而设置属性

<a href="#" style="background-color: chocolate;
font-family: '楷体';
font-size: 50px;
text-decoration: none;
border-style: solid;
border-color: darkgreen;
border-width: 10px;
color: crimson; ">超链接</a>

2.id选择器：

<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a {
text-decoration: none;
font-family: "仿宋";
color: chocolate;
border-style: solid;
border-color: blue;
border-width: 5px;
font-size: 30px;
background-color: cornflowerblue;
}
</style>
</head>

<body bgcolor="azure">
<a href="#">超链接1</a>
<br />
<a href="#">超链接2</a>
<br />
<a href="#">超链接3</a>
<br />
<a href="#">超链接4</a>
</body>

3.类（class）选择器：

<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 300px;
height: 300px;
}
#div1{
border-style: solid;
border-color: chocolate;
border-width: 3px;
font-family: "新宋体";
font-size: 30px;
color: brown;
}
.div2{
border-style: dashed;
border-color: darkkhaki;
border-width: 5px;
}
.div02{
font-family: "仿宋";
font-size: 50px;
color: chartreuse;
}
.div3{
border-style: solid;
border-color: darkslateblue;
border-width: 7px;
}
#div4{
border: dashed 9px red;
font-family: "黑体";
font-size: 70px;
color: darkred;
}
</style>
</head>
<body>
<div id="div1">一二三四</div>
<div class="div2 div02">二二三四</div>
<div class="div3 div02">三二三四</div>
<div id="div4">四二三四</div>
</body>

4.后代选择器：

<div class="div5">
<div>
<ul>
<li>
<a href="#">一二三四</a>
</li>
<li>
<a href="#">二二三四</a>
</li>
<li>
<a href="#">三二三四</a>
</li>
<li>
<a href="#">四二三四</a>
</li>
</ul>
</div>
</div>

.div5 {
border: green 3px dashed;
background-color: cornsilk;
width: 300px;
height: 200px;
}

5.子代选择器：

<div class="div5">
<div>
<ul>
<li>
<a href="#">一二三四</a>
</li>
<li>
<a href="#">二二三四</a>
</li>
<li>
<a href="#">三二三四</a>
</li>
<li>
<a href="#">四二三四</a>
</li>
</ul>
</div>
</div>

.div5>div>ul {
border: 3px burlywood solid;
background-color: mintcream;
}

6.组合选择器：

<h1 id="h1">标题1</h1>
<p class="p1">段落</p>
<h2 id="h2">标题2</h2>

#h1,.p1,#h2 {
font-family: "新宋体";
font-size: 25px;
color: cadetblue;
}

7.伪类选择器：

<a href="#" id="a3">超链接</a>

鼠标滑过链接

#a3:hover {
color: cyan;
font-size: 30px;
}

未访问链接

#a3:link {
color: #7FFF00;
}

已选中的链接

#a3:active {
color: #BDB76B;
}

已访问的链接

#a3:visited {
color: #9932CC;
}

8.伪元素选择器：

<div class="div6">
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
</div>

首行

.div6:first-line {
font-size: 20px;
}

第一个字符

.div6:first-letter {
font-size: 30px;
font-family: "新宋体";
color: dodgerblue;
}

之前插入内容

.div6:before {
content: "123";
}

之后插入内容

.div6:after {
content: "321";
}

（3）外联样式：通过link标签引入外部的css文件夹中css文件到head标签中。

<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/new_file.css" />
</head>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航