样式Style
样式Style，指字体、大小、对齐、间距、背景、边框这些。
Style需要写在HTML的头部 <head> </head>
1. 添加Style
规则：
- 样式写在 ··· <style>··· ··· </style>···· 里
- 样式由选择符和声明组成，而声明又由属性和值组成
组成
选择符：又称选择器，指明网页中要应用样式规则的元素。
声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔。
2. 样式的使用
给元素添加样式
<p class="poem">
其中，class属性就是样式的名字。
如下：
<html>
<head>
<meta charset="UTF-8">
<title>新添声杨柳枝词二首</title>
<style>
.poem{
color: #029323;
font-family: "微软雅黑";
font-size: 16px;
line-height: 180%;
}
</style>
</head>
<body>
<h1>新添声杨柳枝词二首</h1>
<p class="poem">
一尺深红蒙曲尘，天生旧物不如新。<br />
合欢桃核终堪恨，里许元来别有人。<br />
井底点灯深烛伊，共郎长行莫围棋。<br />
玲珑骰子安红豆，入骨相思知不知？<br />
</p>
</body>
</html>
注意
- 最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。
- 为了使用样式更加容易阅读，可以将每条代码写在一个新行内(如上图)。
- 上图给出的示例是一个类选择器的Style，在这里定义样式的时候，名字加点号
.poem{...}，而在使用样式的时候，名称不加点号<p class="poem">。
样式的检查
当样式写完后，我们可以在Chrome浏览器里检查一下实际效果，F12（开发者工具）里，检查样式是否正确，也是调试样式，可以把Chrome浏览器看作调试器，HBuilder看作编辑器。(包括后面的JS也是如此)
视图
常用样式
- 背景 background
background-color: 背景颜色
background-image: 背景图片
颜色表示: rgb 如 #F00 表示红色 #FFF 白色 #000 黑色
rgba 如 #F008 最后一个8表示透明度
rrggbb 如 #FF9309
rrggbbaa 如 #FF930988 其中 88表示透明度 - 边距与填充 margin / padding
例：margin:10px;
margin:20px auto auto auto;按上右下左顺序
padding:8px
上下左右都可以分别设置，如padding-left: 8px； - 边框 border
例border : 1px solid #ff0900;
其中，1px是宽度，solid是线型， #ff0900 是颜色
上下左右的边框可以分别设置
border-top / border-right / border-bottom / border-left - 边框圆角 border-radius
border-radius:4px;
上下左右四个角可以分别设置 - 宽度 width / min-width / max-width
例：width:auto;width:800px;width:90%;
百分比表示占父元素宽度的百分比 - 高度 height / min-height / max-height
例：height:400px;min-height:300px; - 文字样式 font
color:#444; 文字颜色
font:italic bold 14px "微软雅黑";
font-size:12px; 字高
font-family:"微软雅黑"; 字体名称
text-align:center; 段落水平对齐
font-weight:bold; 粗体
font-style:italic;
更多样式，可以参考W3School上的内容(作为后台开发者，不必深究）。
样式单 CSS
CSS，Cascading Style Sheets，层叠样式单（这个翻译很古怪），指样式的集合。
假如分开嵌入到每个页面，相同的样式需要修改时，每个页面都要修改，不符合设计思想。一般来说，一个网站里的公共的样式会放在一个文件里背引用。
项目结构
poem.css文件
.poem-title{
padding: 10px;
text-align: center;
margin: 20px;
font-family: "宋体";
}
.poem-content{
color: #029323;
font-family: "微软雅黑";
font-size: 16px;
line-height: 180%;
background-color: #aaa;
padding: 30px;
max-width: 350px;
margin: 50px auto;
text-align: center;
border: 1px solid #a00;
}
比如新建一个poem.css，存放诗歌显示的一般样式，然后在HTML文件里引入这个CSS，
<link rel="stylesheet" href="css/poem.css" />
提示
- CSS注释代码
就像在HTML的注释一样，在CSS中也有注释语句：用/*注释语句*/来标明(与HTML的注释不一样！)。
CSS注释
- Style的三种写法，分别是内联式、嵌入式、外联式。
内联式：<span style="color:blue">。
嵌入式：将Style写在本页面的<head>，然后在标签中直接引入<p class="poem-content">。
外联式：<link rel="stylesheet" href="css/poem.css" />，然后在标签中直接引入<p class="poem-content">。
关于这三种写法的优先级问题，只需要记住 就近原则，谁离本标签的最近，就选择谁！（包括后面的类选择器也是如此）
网友评论