样式单CSS

目录

一、添加样式：

样式Style

1、添加style

 规则：

2、样式的使用

二、样式的检查

三、常用样式

1、背景：background

2、边框与填充margin/padding

3、边框border

4、圆框边角border-radius

5、宽度 width/min-width/max-width

6、高度height/min-height/max-height

7、文本样式

四、样式单

**********************************最终效果****************************************

一、添加样式：

样式Style

1、添加style

样式Style，指字体、对齐、间距、背景、边框这些显示参数

 规则：

--样式写在<style></style>里

--.musicBody和.musicTitle是样式的名字

--每一项都是 name:value格式，注意冒号和分号

2、样式的使用

可以给元素添加样式

<p class="musicBody">

其中，class属性就是样式的名字

*****************************************************************************************************

二、样式的检查

当样式写完后，要在Chrome里检查一下实际效果，

在开发者工具里，检查样式是否正确

Chrome按F12（菜单|更多工具|开发者工具）

 

 

 

 调整为满意效果后，把样式拷贝到HBuilder里

三、常用样式

**常用样式**

1、背景：background

 

bacakground-color：背景颜色

background-image：

颜色表示：

rgb    如#F00表示红色，#FFF白色，#000白色

rgba  如#F008最后一个8表示透明度

 

2、边框与填充margin/padding

例：

                margin: 10px;
                margin: 20px auto auto auto;       按照   上-右-下-左   顺序
                padding:  10px 100px 10px 500px;

另外：上下左右也可以分别设置，如：padding-left: 80px

3、边框border

border: 10px solid #0000FF;

上下左右也可以分别设计

border-top: .......

4、圆框边角border-radius

border-radius: 50px;

上下左右也可以分别设计.......

5、宽度 width/min-width/max-width

例：         width: auto;
                width: 800px;
                width: 90%; 

百分比表示占父元素宽度的百分比

6、高度height/min-height/max-height

例：         height: 400px;
                min-height: 300px;

百分比表示占父元素宽度的百分比

7、文本样式

                color:blue;                                        ---颜色
                font-family: "华文新魏";                    ---字体
                font: italic bold 14px "微软雅黑";      ----斜体 粗体 大小 字体
                text-align: ;                                       ----对齐
                font-size: 40px;                                ---字体大小

四、样式单

CSS：Cascading style Sheet

层叠样式单，指样式的集合

一般来说，一个网站里里的公共的样式会放在一个文件里被引用，

比如：新建一个music.css来存放歌词的一般样式，然后在HTML里面引用这个css

<link rel="stylesheet" href="../css/music.css" />

 

*********************************最终效果

代码：
Contact me

 

---