zoukankan      html  css  js  c++  java
  • CSS样式

        本系列文章的绝大多数内容都来自 w3cschool, 再次感谢。

        前一篇介绍了CSS的基础语法,这一篇简单介绍一下CSS样式。本文只是简单说明CSS可以设置哪些样式,都能实现什么功能,至于这些属性的使用细节,本文不做介绍,请一定要再查资料。比如,下面会介绍background-attachment可以设置背景是否滚动,它有fixed, scroll, inherit三个可选值,但实际上,任何版本的ie浏览器都不支持inherit这个值。

    1. CSS背景

    • background-color为元素设置背景色
    • background-image可以设置背景图像
    • background-repeat可以实现页面上对背景图像进行平铺
    • background-position 改变图像在背景中的位置
    • background-attachment设置背景是否滚动

    2. CSS文本

    • text-indent 可以实现文本缩进
    • text-align 影响一个元素中的文本行互相之间的对齐方式
    • word-spacing可以改变字(单词)之间的标准间隔
    • text-transform处理文本的大小写
    • text-decoration提供了一些有趣的功能:none,underline,overline,line-through,blink,inherit
    • white-space会影响到用户代理对源文档中的空格、换行和 tab 字符的处理
    • direction影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。

    3. CSS字体

    • font-family可以指定某种字体系列或者字体,可继承
    • font-size设置字体尺寸
    • font-style设置字体风格
    • font-variant以小型大写字体或者正常字体显示文本
    • font-weight设置字体的粗细
    • font-stretch对字体进行水平拉伸,但是CSS2.1已经删除了该属性

    4. CSS列表

    • list-style-type 修改用于列表项的标志类型
    • list-style-image 用于为列表项设置图片
    • list-style-position设置列表中列表项标识的位置
    • list-style是对上述三个属性的合写,顺序随意,至少一个属性值

    5. CSS表格

    • border设置表格边框宽度,颜色和线型
    • border-collapse 设置是否将表格边框折叠为单一边框
    • width 和 height 定义表格的宽度和高度
    • text-align 设置水平对齐方式
    • vertical-align 设置垂直对齐方式
    • td 和 th 元素的 padding 属性可以控制单元格中内容与边框的距离
    • border-spacing 设置分隔单元格的边框的距离
    • caption-side设置表格标题的位置
    • empty-cells设置显示表格中的空单元格
    • table-layout设置显示单元格,行,列的算法
    • background-color设置表格背景色
    • color设置表格内文本的背景色

    6. 轮廓

    • outline-color 设置轮廓线颜色
    • outline-style 设置轮廓的样式
    • outline-width 设置轮廓的宽度
    • outline 同时设置以上三个属性
  • 相关阅读:
    LeetCode 3-Longest Substring Without Repeating Characters
    LeetCode 2-Add Two Numbers
    LeeCode 1-Two Sum
    Python中Lambda, filter, reduce and map 的区别
    解决Eclipse10配置Pydev不成功的问题
    Pythonxy下载链接
    546C. Soldier and Cards
    欧拉工程第58题:Spiral primes
    欧拉工程第57题:Square root convergents
    Linux编辑器vim键盘详解
  • 原文地址:https://www.cnblogs.com/yuepeng/p/2008721.html
Copyright © 2011-2022 走看看