01-CSS基础-常见属性

2018-04-09 本文已影响0人 xiaohan_zhang

CSS书写格式

行内样式
可以将css代码写到开始标签当中
<div style="color: red"></div>
内嵌样式
可以在一对header标签中写上一个style标签,在style标签中编写css代码

<style>
    div{
        color: red;
    }
</style>

外链样式 --- 一般使用这种方式
单独新建一个.css文件，把css代码写到这个文件中，通过link把.css文件和.html文件关联起来
新建css文件, css文件最好也设置utf8编码

@charset "utf-8";
div{
    color: red;
}

html文件中

<head>
    <link rel="stylesheet" href="css书写格式.css">
</head>

导入样式

<style>
    @import "css书写格式.css";
</style>

注：

style标签必须写在head标签中;
style标签中的type属性可以不写, 默认就是 type="text/css";

文字属性

规定文字样式

格式：font-style: italic;

取值（常用）：
normal：正常的，默认就是正常的
italic：倾斜的

快捷键：
fs： font-style: italic;
fsn： font-style: normal;

规定文字粗细

格式： font-weight: bold;

取值：
1）单词取值:
bold：加粗
bolder：比加粗还要粗
lighter：细线，默认就是细线
2）数字取值：
100-900之间整百的数字

快捷键：
fw： font-weight:;
fwb： font-weight: bold;
fwbr： font-weight: bolder;

规定文字大小

格式： font-size: 30px;

取值： px (像素 pixel)

快捷键：
fz： font-size: ;
fz30： font-size: 30px;

规定文字字体

格式： font-family:Kai;

取值：各种字体名称

快捷键：
ff： font-family: ;

注意:
如果取值是中文，需要用双引号或者单引号括起来；
如果设置的字体不存在, 那么系统会使用系统默认字体来显示；
中文字体里面都包含了英文，英文字体里面都没有包含中文；（如果想给界面中的英文单独设置字体, 那么英文的字体必须写在中文的前面）

可以给字体设置备选方案：
格式：font-family:"字体1", "备选方案1", ...;

<style>
    p {
        font-style: italic;
        font-weight: bold;
        font-size: 30px;
        /*font-family: Kai;*/
        /*如果设置的字体不存在，会用系统默认字体，可以设置备选方案*/
        /*中文、英文用不同字体，英文字体写前面。英文字体无法处理中文，遇到中文时，采用备选字体处理*/
        font-family: "Times New Roman", "宋体", STFangsong;
        /*简写 font: style weight size family;*/
        font: italic bold 20px Kai;
    }
</style>

文字属性缩写

缩写格式:
font: style weight size family;

font:italic bold 10px "楷体";

sytle、weight 可以省略，style、weight的位置可以交换；
size、family 不能省略，size、family 的位置不可以交换，size、family必须写在所有属性的最后。

文本属性

给文本添加装饰

格式：text-decoration: underline;

取值：
underline：下划线
line-through：删除线
overline：上划线
none：什么都没有, 最常见的用途就是用于去掉超链接的下划线

快捷键：
td： text-decoration: none;
tdu： text-decoration: underline;
tdl： text-decoration: line-through;
tdo： text-decoration: overline;

设置文本水平对齐方式

格式： text-align: center;

取值：
left：左
right：右
center：中

快捷键：
ta： text-align: left;
tar： text-align: right;
tac： text-align: center;

<style>
    p{
        text-decoration: underline;
        text-align: left;
        text-indent: 2em;
    }
</style>

设置文本缩进

格式： text-indent: 2em;

取值：
2em, 其中em是单位, 一个em代表缩进一个文字的宽度

快捷键：
ti： text-indent:;
ti2e： text-indent: 2em;

颜色属性

通过color属性来修改文字颜色。

格式： color: 值;

取值：
英文单词：red green blue
rgb：rgb(0,0,0)
rgba：a代表透明度, 取值是0-1, 取值越小就越透明
十六进制：十六进制中是通过每两位表示一个颜色(例如: #FFEE00 FF表示R EE表示G 00表示B)
十六进制缩写：在CSS中只要十六进制的颜色每两位的值都是一样的, 那么就可以简写为一位（例如: #FFEE00 == #FE0）

<style>
    p{
        color: red;
        color: rgb(255,0,0);
        color: rgba(255,0,0,0.5);
        color: #FF0000;
        color: #F00;
    }
</style>

列表相关的css属性

list-style-type: 设置li元素前面的标记样式，最多的取值是none
list-style-image: 设置图片为li元素前面的标记，会覆盖list-style-type的设置很少用
list-style-position: 设置li元素前面标记的位置，即li前面的标记要不要计算在li的内容内，可以取outside、inside两个值较少用

list-style: none 一般会这样用

    <style>
        .dongman-ul{
            padding: 0;
            margin: 0;
            /* 设置li元素前面的标记样式 用的最多的取值是none*/
            list-style-type: none;
        }
        .dongman-ul li{
            margin-top: 8px;
        }
        .dongman-ul li span {
            background-color: blueviolet;
            color: #ffffff;
            padding: 0 5px;
        }
        .music{
            margin-left: 30px;
            /* 设置图片为li元素前面的标记，会覆盖list-style-type的设置 很少用*/
            list-style-image: url('./images/icon.png');
        }
        .movie {
            /* 设置li元素前面标记的位置，即li前面的标记要不要计算在li的内容内，可以取outside、inside两个值 较少用*/
            list-style-position: outside;
        }
        /* 一般只用list-style:none */
    </style>

    <h2>热门动漫</h2>
    <ul class="dongman-ul">
        <li><span>1</span>海贼王</li>
        <li><span>2</span>火影忍者</li>
        <li><span>3</span>名侦探柯南</li>
        <li><span>4</span>进击的巨人</li>
    </ul>

    <h2>热门歌曲</h2>
    <ul class="music">
        <li>人间城</li>
        <li>皆可</li>
    </ul>

    <h2>热门电影</h2>
    <ul class="movie">
        <li>极速车神</li>
        <li>八佰</li>
        <li>急先锋</li>
    </ul>

表格相关的CSS属性

    <style>
        table {
            /* 表格边框的宽度 实线虚线 边框颜色 */
            border: 1px solid #666;
            /* 边框合并 */
            border-collapse: collapse;
            /* table居中显示 */
            margin: 20px auto;
        }
        td,th{
            border: 1px solid #666;
            padding: 10px 20px;
            text-align: center;
        }
        [rowspan],[colspan]{
            font-weight: 700;
        }
        .title{
            font-size: 30px;
        }
    </style>

    <table>
        <thead>
            <tr>
                <!-- 按列合并 -->
                <td class="title" colspan="6">课程表</td>
            </tr>
            <tr>
                <th></th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <!-- 按行合并 -->
                <td rowspan="3">上午</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
            </tr>
            <tr>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
            </tr>
            <tr>
                <td>英语</td>
                <td>英语</td>
                <td>英语</td>
                <td>英语</td>
                <td>英语</td>
            </tr>
            <tr>
                <td rowspan="3">下午</td>
                <td>化学</td>
                <td>化学</td>
                <td>化学</td>
                <td>化学</td>
                <td>化学</td>
            </tr>
            <tr>
                <td>生物</td>
                <td>生物</td>
                <td>生物</td>
                <td>生物</td>
                <td>生物</td>
            </tr>
            <tr>
                <td>物理</td>
                <td>物理</td>
                <td>物理</td>
                <td>物理</td>
                <td>物理</td>
            </tr>
            <tr>
                <td rowspan="2">晚自习</td>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
            </tr>
            <tr>
                <td>英语</td>
                <td>英语</td>
                <td>英语</td>
                <td>英语</td>
                <td>英语</td>
            </tr>
        </tbody>
    </table>

表格

Emmet语法

生成html代码模板
!
生成子代元素
div>p*3
生成兄弟元素
div+p+a
上一层级元素
div>p>span^h2+p ^表示回到上一层级，即p层级
分组
(div>p>span)+strong+img div strong img在同一层级
属性
div#box id属性
div.box class属性
div[title="name"] title属性（普通属性）
{}内容
div{我是div}
div.box{我是div}
$数字
div.box$*4 生成4个class为box1~box4的div
ul>li${列表元素$}*3
隐式标签
.box 表示生成class为box的div
.box>.inner_box 生成两个div，外层class为box,内层class为inner_box
table>#row$*3>[colspan="td内容"] 自动生成table中的tr和td