美文网首页我爱编程
01-CSS基础-常见属性

01-CSS基础-常见属性

作者: xiaohan_zhang | 来源:发表于2018-04-09 15:37 被阅读0次
CSS书写格式
  1. 行内样式
    可以将css代码写到开始标签当中
    <div style="color: red"></div>
  2. 内嵌样式
    可以在一对header标签中写上一个style标签,在style标签中编写css代码
<style>
    div{
        color: red;
    }
</style>
  1. 外链样式 --- 一般使用这种方式
    单独新建一个.css文件,把css代码写到这个文件中,通过link把.css文件和.html文件关联起来
    新建css文件, css文件最好也设置utf8编码
@charset "utf-8";
div{
    color: red;
}

html文件中

<head>
    <link rel="stylesheet" href="css书写格式.css">
</head>
  1. 导入样式
<style>
    @import "css书写格式.css";
</style>

注:

  1. style标签必须写在head标签中;
  2. 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

相关文章

  • 01-CSS基础-常见属性

    CSS书写格式 行内样式可以将css代码写到开始标签当中 内嵌样式可以在一对header标签中写上一个style标...

  • ## CSS基础-常见属性

    ## CSS基础-常见属性 # HTML被废弃的标签 # 字符实体 # CSS # 文字属性 # 文本装饰属性 #...

  • 01-CSS基础认知

    CSS基本知识 基本格式 注意点:1.style标签必须写在head标签的开始标签和结束标签之间(也就是必须和ti...

  • 03-CSS3

    CSS教程 01-CSS入门基础 课程概要 一、CSS介绍 CSS概述 CSS指层叠样式表 CSS样式表极大地提高...

  • 基础 (十) : UIView常见属性

    如何修改控件状态 如何修改控件的状态呢?方法很简单: 每一个UI控件都是一个对象 修改UI控件的状态,其实就是修改...

  • CSS基础-CSS常见属性

    CSS常见属性(CSS一般是用来描述标签名称和属性名称,属性名称就是改变样式,标签名称就是以后要学习的选择器) 文...

  • CSS基础--CSS常见属性

    CSS常见属性 文字属性 font-style 作用: 规定文字样式 格式: font-style: italic...

  • SpringBoot properties配置 说明(上)

    常用 application.properties 配置,常见Spring Boot属性的列表以及对使用它们的基础...

  • css选择器

    1.CSS选择器常见的有几种? 基础选择器 组合选择器 属性选择器属性选择器可以根据某个属性是否存在或属性的值寻找...

  • 01-CSS

    前言1-CSS对HTML元素分类 css元素分为三种:块级元素、行内元素和行内块元素。 1.块级元素:设置disp...

网友评论

    本文标题:01-CSS基础-常见属性

    本文链接:https://www.haomeiwen.com/subject/zwjmhftx.html