CSS入门
1.什么是CSS?
CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。
是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
美化HTML网页。
2.如何将样式表加入您的网页？
(1).内联定义 (Inline Styles)
内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>1.内联定义 (Inline Styles)</title>
</head>
<body>
<h1>1.内联定义 (Inline Styles)</h1>
<h2>内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性</h2>
<p style="font-size: 30px; color: red; background-color: black;">内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性</p>
</body>
</html>
(2).定义内部样式块对象 (Embedding a Style Block)
HTML文档的标记之间插入一个块对象
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2.定义内部样式块对象 (Embedding a Style Block)</title>
<style>
p{
font-size: 50px;
color: blue;
background-color: cadetblue;
}
</style>
</head>
<body>
<h1>2.定义内部样式块对象 (Embedding a Style Block)</h1>
<h2>HTML文档的HEAD标记之间插入一个STYLE.../STYLE块对象</h2>
<p>HTML文档的HEAD标记之间插入一个STYLE.../STYLE块对象</p>
</body>
</html>
(3).链入外部样式表文件 (Linking to a Style Sheet)
你可以先建立外部样式表文件（.css），然后在HTML中HEAD标记之间通过link标记，将先建立外部样式表文件（.css）引入。【HTML文件与CSS样式会分离】
例如：
创建独立的css文件
mycsstest.css
p{
font-size: 40px;
color: aqua;
background-color: chocolate;
}
css3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>链入外部样式表文件 (Linking to a Style Sheet)</title>
<link rel="stylesheet" type="text/css" href="mycsstest.css">
</head>
<body>
<h1>链入外部样式表文件 (Linking to a Style Sheet)</h1>
<h2>你可以先建立外部样式表文件（.css），然后在HTML中HEAD标记之间通过link标记，
将先建立外部样式表文件（.css）引入。【HTML文件与CSS样式会分离】</h2>
<h2>link标记的href属性---css文件的路径</h2>
<p>你可以先建立外部样式表文件（.css），然后在HTML中HEAD标记之间通过link标记，
将先建立外部样式表文件（.css）引入。【HTML文件与CSS样式会分离】</p>
</body>
</html>
3.css的格式
(1).内联定义 (Inline Styles)情况下:
格式：
<标记 style=”css属性名称1 : 属性取值1 ; css属性名称2 : 属性取值2 ;”>
(2).内部样式块/链入外部样式表文件情况下:
格式：
css选择器{
css属性名称1:属性取值1;
css属性名称2:属性取值2;
}
4.css选择器
作用：从html文件中选中自己需要控制【添加样式】的标记。
(1).ID选择符
首先需要为html标记添加id属性设置属性值。
使用#id属性值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ID选择符</title>
<style>
#p1{font-size: 20px;}
#p2{font-size: 30px;}
#p3{font-size: 40px;}
#p4{font-size: 50px;}
#p5{font-size: 60px;}
</style>
</head>
<body>
<h1>ID选择符</h1>
<h2>首先需要为html标记添加id属性设置属性值。</h2>
<h2>使用#id属性值。</h2>
<p id="p1">测试ID选择符=p1</p>
<p id="p3">测试ID选择符=p2</p>
<p id="p3">测试ID选择符=p3</p>
<p id="p4">测试ID选择符=p4</p>
<p id="p5">测试ID选择符=p5</p>
</body>
</html>
(2).类选择符
首先需要为html标记添加class属性设置属性值。
使用.class属性值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>类选择器</title>
<style>
.p1{
font-size: 20px;
color: aqua;
}
.p3{
font-size: 30px;
color: blue;
}
.p4{
font-size: 40px;
color: brown;
}
.p5{
font-size: 50px;
color: chartreuse;
}
</style>
</head>
<body>
<h1>类选择器</h1>
<h2>首先需要为html标记添加class属性设置属性值</h2>
<h2>使用.class属性值。</h2>
<p class="p1">测试class选择符=p1</p>
<p class="p3">测试class选择符=p2</p>
<p class="p3">测试class选择符=p3</p>
<p class="p4">测试class选择符=p4</p>
<p class="p5">测试class选择符=p5</p>
</body>
</html>
(3).元素选择器
根据html标记的名称选中被控制的标记。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元素选择器</title>
<style>
p{
font-size: 40px;
}
#p1{
color: red;
}
.p2{
color: blue;
}
</style>
</head>
<body>
<h1>元素选择器</h1>
<h2>根据html标记的名称选中被控制的标记。</h2>
<p id="p1">测试元素选择器</p>
<p class="p2">测试元素选择器</p>
</body>
</html>
(4).包含选择符
选中包含在父标记中的子标记。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>包含选择器</title>
<style>
div{
width: 400px;
height: 400px;
background-color: red;
}
div img{
width: 300px;
}
</style>
</head>
<body>
<h1>包含选择器</h1>
<h2>选中包含在父标记中的子标记</h2>
<div>
<img src="imgs/avatar.png"/>
</div>
<br>
<img src="imgs/avatar.png"/>
</body>
</html>
4.css属性和取值
(1).文字属性
font-size–字体尺寸【数字/px】
color----字体颜色【单词/颜色码】
font-family—字体【黑体、宋体】
font-style-----字体倾斜【normal | italic | oblique】
font-weight----字体粗细【整百数字100–900】
text-decoration----字体的装饰线
【none没有 || underline 下划线 || overline 上划线 || line-through 贯穿线 】
text-shadow — 文字是否有阴影及模糊效果
color颜色 || length水平延伸距离 || length垂直延伸距离 || opacity模糊效果的作用距离
font-variant—文本是否为小型的大写字母 normal | small-caps
text-transform–文本的大小写
none 无| capitalize第一个字母转换成大写 | uppercase 转换成大写| lowercase 转换成小写
line-height — 行高【数字/px】
letter-spacing—文字之间的间隔【数字/px】
word-spacing—单词之间的间隔【数字/px】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字属性设置</title>
<style>
.p1{
font-size: 20px;
color: red;
font-family: 黑体;
font-style: italic;
font-weight: 900;
}
</style>
</head>
<body>
<h1>文字属性设置</h1>
<p class="p1">font-size--字体尺寸【数字/px】</p>
<p class="p1">color----字体颜色【单词/颜色码】</p>
<p class="p1">font-family---字体【黑体、宋体】</p>
<p class="p1">font-style-----字体倾斜【normal | italic | oblique】</p>
<p class="p1">font-weight----字体粗细【整百数字100--900】</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字属性设置</title>
<style>
#p1{
font-size: 20px;
text-decoration:underline;
}
#p2{
font-size: 30px;
text-decoration:line-through;
text-shadow:black 10px 10px 10px;
}
#p3{
font-size: 40px;
text-decoration:overline ;
text-shadow:black 10px 10px 10px;
font-variant:small-caps;
}
#p4{
font-size: 50px;
text-decoration:overline ;
text-shadow:black 10px 10px 10px;
text-transform:uppercase;
}
</style>
</head>
<body>
<p id="p1">text-decoration----字体的装饰线</p>
<p id="p2">text-shadow --- 文字是否有阴影及模糊效果</p>
<p id="p3">font-variant---文本是否为小型的大写字母 normal | small-caps </p>
<p id="p4">text-transform--文本的大小写</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字属性设置</title>
<style>
p{
font-size: 20px;
line-height:25px;
letter-spacing:10px;
word-spacing:25px;
}
</style>
</head>
<body>
<p>line-height --- 行高【数字/px】<br>
letter-spacing---文字之间的间隔【数字/px】<br>
word-spacing---单词之间的间隔【数字/px】<br>
wordspacing letterspacing lineheight
</p>
</body>
</html>
(2).文本属性
text-indent—文本的缩进【数字px】
vertical-align----内容的垂直对其方式[top middle bottom]
text-align----标记/文本的对齐方式[left | right | center ]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本属性设置</title>
<style>
.p1{
text-indent:100px;
text-align:center;
}
table{
height: 200px;
width: 500px;
text-align:right;
}
table td{
vertical-align:top;
}
</style>
</head>
<body>
<h1>文本属性设置</h1>
<p>测试缩进</p>
<p class="p1">text-indent---文本的缩进【数字px】</p>
<table border="1px">
<tr>
<td>vertical-align</td>
<td>内容的垂直对其方式[top middle bottom]</td>
</tr>
<tr>
<td>text-align</td>
<td>标记/文本的对齐方式[left | right | center ]</td>
</tr>
</table>
</body>
</html>
(3).背景属性设置
html中的任意元素设置背景
background-color – 设置元素的背景色【单词/颜色码】
background-image --设置元素的背景图片【url(“路径”); 】
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景设置</title>
<style>
p{
font-size: 40px;
color: red;
background-color:blue;
}
div{
width: 300px;
height: 300px;
background-image:url(img/222.jpg);
}
body{
background-color: yellow;
}
</style>
</head>
<body>
<h1>background-color -- 设置元素的背景色【单词/颜色码】</h1>
<p>background-color -- 设置元素的背景色【单词/颜色码】</p>
<div>background-image --设置元素的背景图片【url("路径"); 】</div>
</body>
</html>
(4).尺寸设置
Width—设置标记的宽度【数字px】
Height—设置标记的高度【数字px】
(5).边框设置
Border–设置边框 border-width [粗细]|| border-style [样式]|| border-color 【颜色】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边框设置</title>
<style>
p{
border:10px solid red;
}
img{
border:20px dotted blue;
}
div{
width: 200px;
height: 200px;
background-color: yellow;
border: 30px double green;
}
</style>
</head>
<body>
<p>Border--设置边框 border-width [粗细]|| border-style [样式]|| border-color 【颜色】</p>
<img src="imgs/avatar.png" />
<br>
<div></div>
</body>
</html>
(6).修饰边距样式属性
Margin：设置元素四边的外补丁
Padding：设置元素四边的内补丁
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元素间距设置</title>
<style>
body{
padding-top: 100px;
padding-left: 50px;
}
div{
width: 400px;
height: 400px;
background-color: black;
}
img{
margin-top: 50px;
margin-left: 150px;
}
</style>
</head>
<body>
<div>
<img src="imgs/avatar5.png" />
</div>
</body>
</html>
(7).修饰列表样式属性
list-style-image–设置或检索作为对象的列表项标记的图像—图片路径
list-style-type-----设置或检索作为对象的列表项预设标记—disc | circle | square | decimal…
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表属性设置</title>
<style>
ul li{
font-size: 20px;
}
ul{
list-style-image:url("imgs/tubiao.png");
}
</style>
</head>
<body>
<ul>
<li>name=zhangsan</li>
<li>age=23</li>
<li>地址=西安</li>
</ul>
</body>
</html>
(8).表格属性设置
border-collapse–表格的行和单元格的边是合并还是独立。
separate： 边框独立
collapse： 相邻边被合并
border-spacing–边框独立时，单元格与单元格之间的间距【数字px】
empty-cells----当表格的单元格无内容时，是否显示该单元格的边框。
hide：隐藏该单元格的边框。
show：显示该单元格的边框。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格属性设置</title>
<style>
table{
width: 600px;
height: 300px;
border-collapse:separate;
border-spacing:10px;
empty-cells:hide;
}
</style>
</head>
<body>
<table border="1px">
<tr>
<td>border-collapse</td>
<td>表格的行和单元格的边是合并还是独立</td>
<td>separate： 边框独立<br>collapse： 相邻边被合并</td>
</tr>
<tr>
<td>border-spacing</td>
<td>边框独立时，单元格与单元格之间的间距【数字px】</td>
<td></td>
</tr>
<tr>
<td>empty-cells</td>
<td>当表格的单元格无内容时，是否显示该单元格的边框</td>
<td>hide：隐藏该单元格的边框.<br>show：显示该单元格的边框</td>
</tr>
</table>
</body>
</html>
(9).布局属性设置
Display—对象是否及如何显示
none： 隐藏对象。不为被隐藏的对象保留其物理空间
block： 指定对象为块元素。
Visibility—定义了元素是否可见
isible： 设置对象可视保留物理空间
hidden： 设置对象隐藏
collapse： 主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。
Float—元素向左或者向右浮动放置
none： 设置元素不浮动
left： 设置元素浮在左边
right： 设置元素浮在右边
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>布局属性设置</title>
<style>
#img1{
display:none;
}
#img2{
visibility:hidden;
}
p{
float:right;
}
#img4{
float:right;
}
ul{
list-style-type: none;
}
ul li{
font-size: 30px;
float:left;
padding-left: 50px;
background-color: blue;
}
</style>
</head>
<body>
<h2>Display---对象是否及如何显示<br>
[none： 隐藏对象。不为被隐藏的对象保留其物理空间<br>
block： 指定对象为块元素。]</h2>
<img id="img1" src="imgs/avatar2.png" />
<h2>Visibility---定义了元素是否可见<br>
isible： 设置对象可视保留物理空间<br>
hidden： 设置对象隐藏 </h2>
<img id="img2" src="imgs/avatar2.png" />
<h2>Float---元素向左或者向右浮动放置<br>
none： 设置元素不浮动 <br>
left： 设置元素浮在左边 <br>
right： 设置元素浮在右边 </h2>
<img id="img3" src="imgs/avatar2.png" />
<img id="img4" src="imgs/avatar2.png" />
<p>设置右浮动</p>
<br><hr>
<ul>
<li>设置右浮动</li>
<li>设置右浮动</li>
<li>设置右浮动</li>
</ul>
</body>
</html>
(10).定位属性
Position–设置定位方式
static：默认。
relative:相对定位[对象遵循常规流,不会影响常规流中的任何元素]
absolute：绝对定位 [对象脱离常规流]
top:
定义了元素的上外边距边界与其包含块上边界之间的间距
数字，不允许负值
right:
定义了元素的右外边距边界与其包含块右边界之间的间距
数字，不允许负值
bottom:
定义了元素的底外边距边界与其包含块底边界之间的间距
数字，不允许负值
left:
定义了元素的左外边距边界与其包含块左边界之间的间距
数字，不允许负值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定位设置</title>
<style>
#div1{
width: 200px;
height: 200px;
background-color: red;
position:absolute;
left: 1000px;
top: 500px;
}
#div2{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
z-index:
定义一个元素在文档中的层叠顺序 数字【数值越大就会在最上面】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>z-index</title>
<style>
#test1,#test2,#test3,#test4 {
position: absolute;
width: 200px;
height: 100px;
padding: 5px 10px;
color: #fff;
text-align: right;
}
#test1{
z-index: 1;
font-size: 20px;
background-color: red;
}
#test2{
z-index: 2;
font-size: 20px;
top: 30px;
left: 30px;
background-color: blue;
}
#test3{
z-index: 3;
font-size: 20px;
top: 60px;
left: 60px;
background-color: black;
}
#test4{
z-index: 4;
font-size: 20px;
top: 90px;
left: 90px;
background-color: green;
}
</style>
</head>
<body>
<div id="test1">z-index:1</div>
<div id="test2">z-index:2</div>
<div id="test3">z-index:3</div>
<div id="test4">z-index:4</div>
</body>
</html>
扫一扫
512
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
