3.CSS
本章目标
- 选择器
- 常用样式
- 应用方式
- 盒子模型
本章内容
为什么要使用CSS样式:
HTML标签的样式比较单一,很难维护
样式表的切换可以改变网站整体界面风格
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML文件样式的计算机语言
一、选择器
1、样式规则
CSS的基本结构由三部分组成:选择器、属性、属性值
2、选择器类型
- 标签选择器：根据HTML标签选择样式应用的属性 标签名
- 类选择器：根据class属性选择样式应用的属性 .样式类型名
- ID选择器：根据ID属性选择样式应用的元素 #元素id
3、标签选择器
以HTML文档中的标签作为选择符
<HTML>
<HEAD>
<TITLE>样式规则</TITLE>
<STYLE >
P {
color: red;
font-family: "隶书";
font-size: 24px;
}
</STYLE>
</HEAD>
<BODY>
<H2>自勉</H2>
<P>多少白发翁，</P>
<P>蹉跎悔歧路。</P>
<P>寄语少年人，</P>
<P>莫将少年误。</P>
</BODY>
</HTML>
4、类选择器
问题：如果希望其他的标签也能采用P标签的样式，怎么办？
解答：其他标签和P标签应该采用相同的样式，所以要为它们定义一个共享样式类型
.class 选择器为所有具有指定类的元素添加样式，类值的名称必须紧跟在.后面
在标签中通过class属性来引入类选择器
<HEAD>
<TITLE>样式规则</TITLE>
<STYLE >
.red {
color: red;
font-family: "隶书";
}
</STYLE>
</HEAD>
<BODY>
<H2 class="red">自勉</H2>
<P class="red">多少白发翁，</P>
<P class="red">蹉跎悔歧路。</P>
<P>寄语少年人，</P>
<P class="red">莫将少年误。</P>
</BODY>
5、ID 选择器
id指定具有id的元素。id值的名称必须紧跟在#后面。
通过id属性来引用ID选择器
id通常在HTML文档中是唯一的
<HEAD>
<STYLE >
#fire {
color: red;
font-size: 24px;
}
</STYLE>
</HEAD>
<BODY>
<H2 ID="fire">我是二级标题，火是这样的</H2>
<P ID="fire">我是段落，火是这样的</P>
</BODY>
二、常用样式
1、常用的文本样式属性
| 文本属性 | 说 明 |
|---|---|
| font-size | 字体大小 |
| font-family | 字体类型 |
| font-style | 字体样式 |
| color | 设置或检索文本的颜色 |
| text-align | 文本对齐 |
定义颜色:
| 值类型 | 样式 |
|---|---|
| rgb函数：rgb(R,G,B)R、G、B可用百分比值表示，也可用0~255的整数值表示 | color: rgb(100%,0,0)，color: rgb(255,0,0) |
| 使用十六进制数组：#RRGGBB，或#090 | color: #FF0000 |
| 直接使用颜色名 | color:red |
示例：
<STYLE >
P {
font-size: 12px;
font-family: "宋体";
text-align: left;
}
.bigFont {
font-size: 16px;
color: red;
}
</STYLE>
</HEAD>
<BODY>
【新闻】[设搜狐为首页] 9月1日
<P class="bigFont">世锦赛刘翔12秒95夺冠成就大满贯</P>
<P>·我国实施不安全食品召回制度 遏制非法出口</P>
</BODY>
2、常用二
| 文本属性 | 说 明 |
|---|---|
| font-weight | 字体粗细 |
| line-height | 文字行高 |
| word-spacing | 单词间距 |
| letter-spacing | 字母间距 |
| text-decoration | 文本样式 |
<style>
p {
color: #888888;
font-size: 14px;
word-spacing: 10px;
letter-spacing: 2px;
font-weight: 700;
line-height: 1.5;
width: 500px;
}
</style>
</head>
<body>
<p>
Abram went north out of Egypt to the southern part of Canaan with his wife and everything he owned, and Lot went
with him.
</p>
</body>
3、常用三
| 背景属性 | 说 明 |
|---|---|
| background-color | 设置背景颜色 |
| background-image | 设置背景图像 |
| background-repeat | 设置一个指定的图像如何被重复可取值repeat-x、 repeat、 no-repeat、repeat-y |
<STYLE >
……
table
{
background-image:url(images/type_back1.jpg);
background-repeat:no-repeat;
}
</STYLE>
4、伪类
常用属性
| 属性 | 说明 |
|---|---|
| a:link | 设置超链接在未被访问前的样式 |
| a:hover | 设置超链接在其鼠标悬停时的样式 |
| a:visited | 设置超链接在其链接地址已被访问过时的样式 |
| a:active | 设置超链接在被用户激活(在鼠标点击与释放之间发生的事件)时的样式 |
示例
<style>
A {
color: blue;
text-decoration: none;
}
A:hover {
color: red;
}
A:active {
color: green;
}
A:visited {
color: yellowgreen;
}
</style>
<body>
<table>
<TR>
<TD><A href="demo02.html">华为</A> | <A href="demo05.html">摩托罗拉</A></TD>
<TD><A href="demo03.html">联想</A> | <A href="demo06.html">戴尔</A></TD>
</TR>
</table>
</body>
5、其它属性
| 属性 | 说明 |
|---|---|
| List-style-type | 设置列表元素的标记（比如圆点、符号、或者自定义计数器样式） |
| text-indent | 段落首行缩进两个字符 |
| border-radius | 设置圆角 |
<style>
p{
text-indent: 2em;/*em是相对单位，2em即现在一个字大小的两倍*/
}
</style>
<body>
<p>当盒子没有设置固定高度时，高度会随着行高的变化而变化。当盒子设置了固定高度时，高度不会随着行高的变化而变化。当希望一个元素中的文本垂直居中于这个元素时，行高应该等于盒子的高度</p>
</body>
示例二
<style>
table {
border-radius: 5pc;
border: 1px solid red;
}
</style>
<body>
<table>
<TR>
<TD><A href="#">诺基亚</A> | <A href="#">摩托罗拉</A></TD>
<TD><A href="#">联想</A> | <A href="#">戴尔</A></TD>
<td><a href="demo01.html">华为</a></td>
</TR>
</table>
</body>
6、CSS样式的组合
可以将多个选择器设置为相同的样式，并用逗号隔开，呈现一致的外观
<style>
h1,
h2,
.p1 {
color: red;
}
</style>
</head>
<body>
<h1>Java程序员</h1>
<h2>大山程序员</h2>
<p class="p1">大山程序员</p>
</body>
7、样式表的关联性
样式表的关联性指在某些样式定义中，可以定义某样式仅在某个特定元素范围内才有效
<style>
.p1 a
{
color:red;
}
</style>
</head>
<body>
<a href="#">大山程序员</a><br />
<p class="p1">大山程序员<a href="#">大山程序员</a></p>…
“.p1 a”：该样式将选择应用p1样式的元素内的所有a标签
三、三类应用方式
1、内嵌样式表
写在style标签内
<head>
<style >
样式规则
</ style>
</head>
2、行内（嵌入）样式表
直接写在标签的style属性中
<html>
<head>
<title>设置属性</title>
</head>
<body>
<p style="color:red;font-size:30px;font-family:隶书;">
这个段落应用了样式
</p>p>
这个段落按默认样式显示
</body>
</html>
3、外部样式表
建立独立的css文件，扩展名为.css
使用LINK（链接）标签 :
<head>
<link href="newsyle.css" rel="stylesheet" >
</head>
四、盒子模型(了解)
1、盒子模型
所有HTML元素可以看作盒子，在CSS中，“box model”这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距（margin），边框（border），填充（padding），和实际内容（content）
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
如果把盒子模型看作是一个生活中的快递，那么内容部分等同于你买的实物，内边距等同于快递盒子中的泡沫，边框等同于快递盒子，外边距等同于两个快递盒子之间的距离
| 属性 | 说明 |
|---|---|
| margin(外边距) | 清除边框外的区域，外边距是透明的 |
| Border(边框) | 围绕在内边距和内容外的边框 |
| padding(内边距) | 清除内容周围的区域，内边距是透明的 |
| Content(内容)-盒子的内容 | 显示文本和图像 |
影响盒子大小的因素：内容区，内边距，边框会影响盒子的大小，外边距不会影响
2、常用的方框样式属性
| 属 性 | CSS名称 | 说 明 |
|---|---|---|
| 边界属性 | margin-top | 设置对象的上边距 |
| margin-right | 设置对象的右边距 | |
| margin-bottom | 设置对象的下边距 | |
| margin-left | 设置对象的左边距 | |
| 边框属性 | border-style | 设置边框的样式 |
| border-width | 设置边框的宽度 | |
| border-color | 设置边框的颜色 | |
| 填充属性 | padding-top | 设置内容与上边框之间的距离 |
| padding-right | 设置内容与右边框之间的距离 | |
| padding-bottom | 设置内容与下边框之间的距离 | |
| padding-left | 设置内容与左边框之间的距离 |
示例一
<STYLE >
.tableBorder {
border-right-width: 3px;
border-right-color: red;
border-right-style: dashed;
padding-top: 20px;
padding-left: 10px;
}
TR {
background: yellow;
}
</style>
<TABLE>
<TR>
<TD class="tableBorder">手机冲值</TD>
<TD class="tableBorder">电子彩票</TD>
</TR>
</TABLE>
示例二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
table{
width: 400px;
height: 400px;
border: 1px solid red;
padding: 20px;
margin-left: 20px;
}
</style>
<body style="margin: 0px;">
<table>
<tr>
<td>手机</td>
</tr>
</table>
</body>
</html>
注意：body和浏览器之间有距离，要设置body style=“margin: 0px;”时才能去掉距离，而不是设置table的margin
本文来自博客园，作者：icui4cu，转载请注明原文链接：https://www.cnblogs.com/icui4cu/p/18824878
浙公网安备 33010602011771号