1、字体

font-family：字体；

    <body>

     <div style="font-family:宋体">宋体</div>

    </body>

font-size：字号；

    <body>

     <div style="font-family:宋体; font-size:36px">宋体</div>

    </body>

font-weight：bold/normal字体加粗还是正常

    <body>

     <div style="font-family:宋体; font-size:36px; font-weight:bold">宋体</div>

    </body>

font-style：italic/normal 倾斜还是正常

    <body>

     <div style=" font-style:italic">宋体</div>

    </body>

color是字体颜色

    <body>

     <div style=" font-style:italic; color:#F00">宋体</div>

    </body>

text-decorration：underline/overline/line-through下划线上划线删除线；none正常不有线

    <body>

     <div style=" text-decoration:line-through;">电话是法国和师傅赶紧的还能够的话你</div>

    </body>

    <body>

     <div style=" text-decoration:underline;">电话是法国和师傅赶紧的还能够的话你</div>

    </body>

    <body>

     <div style=" text-decoration:line-through;">电话是法国和师傅赶紧的还能够的话你</div>

    </body>

text-align：水平居中方式，center/left/right

    <body>

     <div style="width:100px; height:100px; background-color:#F00; text-align:center">师傅赶紧你

     </div>

    </body>

vertical-align：垂直对齐方式middle、top、bottom  必须和line-height：行高一起使用，不然垂直居中不起作用

    <body>

     <div style="width:100px; height:100px; background-color:#F00; text-align:center; vertical-align:middle; line-height:100px">师傅赶紧你

     </div>

    </body>

2、隐藏

display：none不显示（在浏览器中不占空间）；display:block显示为块，自动换行；display:inline-block显示为块不自动换行，宽高可调整；

display:inline效果同span标签，不自动换行不可调整宽高

visibility：hidden隐藏但是在浏览器中还占空间        visibility：visible显示

隐藏前

    <body>

         <div style="width:100px; height:100px; background-color:#F00; text-align:center; vertical-align:middle; line-height:100px;">一会要隐藏

     </div>

     <div style=" width:100px; height:10px"></div>

     <div style="width:100px; height:100px; background-color:#F00; text-align:center; vertical-align:middle; line-height:100px;">师傅赶紧你

     </div>

    </body>

用display隐藏

    <body>

         <div style="width:100px; height:100px; background-color:#F00; text-align:center; vertical-align:middle; line-height:100px; display:none">一会要隐藏

     </div>

     <div style=" width:100px; height:10px"></div>

     <div style="width:100px; height:100px; background-color:#F00; text-align:center; vertical-align:middle; line-height:100px;">师傅赶紧你

     </div>

    </body>

用visibility隐藏；隐藏后隐藏的表格在浏览器上还是占着一定的空间的

    <body>

         <div style="width:100px; height:100px; background-color:#F00; text-align:center; vertical-align:middle; line-height:100px; visibility:hidden">一会要隐藏

     </div>

     <div style=" width:100px; height:10px"></div>

     <div style="width:100px; height:100px; background-color:#F00; text-align:center; vertical-align:middle; line-height:100px;">师傅赶紧你

     </div>

    </body>

超出部分隐藏overflow

  <body>

         <div style="width:100px; height:100px; background-color:#F00; text-align:center; vertical-align:middle; line-height:100px; overflow:hidden">一会要豆腐宴哦哦还是对方后卫i放到空间发士大夫藏

     </div>

    </body>

css样式属性-字体和隐藏的更多相关文章

  1. CSS样式属性——字体+文本

    CSS属性可分为以下几类:字体.背景.文本.位置.布局.边缘.列表 1. 字体——主要包括文字的字体.大小.颜色.显示效果等基本样式 font-family:用于设置字体系列 font-size:字体 ...

  2. js中获取css样式属性值

    关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...

  3. IE6支持兼容min-width、max-width CSS样式属性

    IE6支持兼容min-width.max-width CSS样式属性 让IE6支持max-width.IE6支持min-width样式 我们在写CSS的时候,常常会遇到让一个图片或一个布局不能超出设定 ...

  4. 常用CSS样式属性

    01.常用样式 1.1.background背景 设置元素背景的样式 background,更好的衬托内容. 属性 描述 值 background 背景属性简写.支持多组背景设置,逗号,隔开 back ...

  5. HTML布局相关的CSS样式属性

    # 转载请留言联系 注意,样式属性是写进CSS里面的. 布局常用样式属性: width 设置元素(标签)的宽度,如:width:100px; height 设置元素(标签)的高度,如:height:2 ...

  6. 11-18网页基础--第二部分CSS样式属性（1）

    第一课:样式属性 style 样式:style样式不仅可以直接在<body>中设置成整个网页的样式.格式:为了将样式.格式多样化,也可以将style单独抽出来,作为一个独立的个体,放在&l ...

  7. CSS样式属性单词之Left

    通常left单独在CSS中设置无效,需要在使用position属性下使用才能生效起作用.left左靠多少距离(距离左边多少)的作用. left 一.left认识与语法 left翻译:左边,左 在CSS ...

  8. css样式实现字体删除线效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. IE6支持min-width、max-width CSS样式属性

    1.IE6支持max-width解决方法 IE6支持最大宽度,解决CSS代码: .yangshi{ max-width:1000px; _width:expression((document.docu ...

随机推荐

  1. browsersync即时刷新页面

    Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面 官网: http://browsersync.cn/ 多个浏览器.多个设备间来 ...

  2. CentOS 6安装并开启telnet服务

    一.安装telnet yum install telnet telnet-server //安装telnet server捎带手把客户端也装了 二.配置xinetd telnet server默认会安 ...

  3. mysql概要（六）连接(内连接，左，右外连接

    内连接 [join on / from 表1,表二 ]效果一样 区别是:可以理解为首先取得笛卡儿积后,再匹配/还是根据条件获得笛卡尔积 内连接:取俩表的交叉匹配数据:(mysql 内连接 左连接 右连 ...

  4. quartz 任务时间调度入门使用

    这一小节主要是针对cronschedule用法进行讨论,首先讲一下cronschedule基础知识点: 一个cronschedule至少有6个字符(或者7个字符),空格作为间隔,比如 0 * * * ...

  5. 汉诺塔问题(The Tower of Hanoi)的递归算法与非递归算法

    非递归算法: 根据圆盘的数量确定柱子的排放顺序: 若n为偶数,按顺时针方向依次摆放 A B C: 若n为奇数,按顺时针方向依次摆放 A C B. 然后进行如下操作: (1)按顺时针方向把圆盘1从现在的 ...

  6. VS 2005 处理条件

    1. VS 设置断点; 2.VS 查找需要跟踪的内存地址,如果是指针,需要取指针存放地的地址; 3. 4.继续运行,直到内存内容被改写.

  7. HashMap实现原理分析（面试问题：两个hashcode相同 的对象怎么存入hashmap的）

    1. HashMap的数据结构 数据结构中有数组和链表来实现对数据的存储,但这两者基本上是两个极端. 数组 数组存储区间是连续的,占用内存严重,故空间复杂的很大.但数组的二分查找时间复杂度小,为O(1 ...

  8. Redis、Mongo - 目录

    redis redis字典取数据.列表取数据(数据量大) redis 实现栈 - python mongodb - 可视化工具 / pymongo - 使用方法

  9. kubernetes应用的各种访问方式

    1. 通过 Pod 的 IP 地址访问应用 1.1 Pod 的IP地址 每个Pod 都会被分配一个IP地址,比如下面这儿pod的IP地址是 10.1.79.11. root@kub-node-0:/h ...

  10. MySQL 如何删除有外键约束的表数据

    今天删除数据库中数据,提示因为设置了foreign key,无法修改删除 可以通过设置FOREIGN_KEY_CHECKS变量来避免这种情况. SET FOREIGN_KEY_CHECKS=0; 删除 ...