前端基础之样式单CSS（3）

2019-01-15 本文已影响0人薛定谔的猫狗

样式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">。
关于这三种写法的优先级问题，只需要记住 就近原则，谁离本标签的最近，就选择谁！（包括后面的类选择器也是如此）