zoukankan      html  css  js  c++  java
  • CSS----学习2

    CSS2属性

    文本

    1 水平对齐方式

    text-align:left/right/center
    也可以让img、input等有水平方向的对齐方式

    2 垂直对齐方式

    vertical-align:top(居顶部)/bottom(居底部)/middle(居中)
    多用于table

    3 设置行高

    line-height:50px/10%;
    如果让文本垂直居中与容器,将line-height的值设置跟容器的高度一样。只适用于单行文本

    4 首行缩进

    text-indent:50px;

    5 内容自动换行(css3)

    word-break:break-all;---允许在单词内部进行换行
    word-break:keep-all;只在空格处或连字符(-)处换行

    6 词间距

    word-spacing:10px;单词与单词之间的间隙为10px,只要有空格出现就认为是一个词的开始

    7 字间距

    letter-spacing:5px;设置字(字符)之间的间隙5px

    8 设置字体颜色

    color:颜色;

    9 设置大小字母的转换

    text-transform:none/capitalize/uppercase/lowercase;
    capitalize:将每个单词的第一个字母大写
    uppercase:将单词所有的字母都转换成大写
    lowercase:将单词所有的字母都转换成小写

    10 文本修饰

    text-decoration:none/underline/line-through/overline;
    none:不添加或者去掉文本修饰
    underline:添加下划线
    line-through:添加删除线
    overline:添加上划线

    11 如果要去掉a标签默认的下划线,设置

    text-decoration:none;

    字体的属性

    1 设置字体大小

    font-size:50px;

    2 字体风格

    font-style:italic(斜体)

    3 字体加粗

    font-weight:bold;

    4 设置字体类型

    font-family:"黑体"

    5 设置小型的大写字母

    font-variant:small-caps;

    边框属性(border)

    border-5px;设置边框的粗细
    border-color:red;设置边框的颜色
    border-style:solid(实线)/dotted(点状线)/dashed(块状线);设置边框样式

      缩写:

    border: 粗细 样式 颜色;
    如果给某一边加边框:top right bottom left
    border-top-5px;
    border-top-color:red;
    border-top-style:solid;
    缩写:
    border-top: 粗细 样式 颜色;
    
    

    容器宽高属性(width/height)

    300px/20%;
    height:300px/20%;

    -----补充----

    常见的块级元素:div ul li ol dt dd hn p table form...
    块级元素的特点:可以自动换行、可以直接设置宽高
    常见的行内(内联)元素:span a b i s u select option...
    内联元素的特点:对宽高没有直接作用、不会自动换行
    常见的空元素:link meta br hr input img...
    空元素的特点:没有内容 在开始标签中闭合,input、img、hr等可以直接设置宽高
    max-500px/50%;设置容器的最大宽度
    min-500px/50%;设置容器的最小宽度
    max-height:100px/10%;设置容器的最大高度
    min-height:100px/10%;设置容器的最小高度
    五 显示(display)
    display:none/block/inline/inline-block/line-table/table
    none:设置元素隐藏
    block:以块级元素显示,设置行内元素以块级元素显示
    inline:以行内元素显示,设置块级元素以行内元素显示
    inline-block:行内元素的宽高都起作用,但是不会换行显示
    table:以表格的方式来显示
    inline-table:将行内元素作为表格的方式来显示,而且不会换行---多用于表格(table)同行显示

    六 CSS的注释

    /* 注释内容 */

    七 背景(background)

    background-color:颜色;设置容器的背景色
    background-image:url("相对路径");设置容器的背景图
    background-repeat:repeat/no-repeat/repeat-x/repeat-y;设置背景以那冲方式重复显示
    repeat:重复显示,默认值
    no-repeat:不重复显示
    repeat-x:横向重复显示
    repeat-y:纵向重复显示
    background-position:水平方向的值 垂直方向的值;如果只写一个方向,另外一个方向默认为center
    水平方向的值:left right center 50px 10%
    垂直方向的值:top bottom center 50px 10%
    默认的为background-position: left top;起始位置为容器的左上角。
    background-attachment:设置图片是否随着滚动条滚动,一般都用于body
    scroll:滚动
    fixed:固定
    默认为scroll
    缩写:background: color url("") repeat attachment postion;
  • 相关阅读:
    页面可视化搭建 整理
    单页面应用(SPA)重新部署后,正在浏览的页面如何更新缓存?
    vim 使用
    浏览器缓存 知识点
    http 2.0 新特性
    GoJS 在 vue 项目中的使用
    详解Vue中watch的高级用法
    什么是 PWA?
    代码风格统一工具:EditorConfig 和 静态代码检查工具:ESLint
    vue-cli 3.x 使用
  • 原文地址:https://www.cnblogs.com/liaohongwei/p/7018730.html
Copyright © 2011-2022 走看看