文本属性

font-size: 16px 文字大小

font-weight: 700 文字粗细 值从100-900 (值为700看上去加粗了) 不推荐使用font-weight: bold

font-family: microsoft yahei 字体(可以用中文如:宋体,或者英文:如simsun,或用unicode编码:如\5B8B\4F53)

font-style: normal 文字风格(如:normal是默认, italic:斜体)

line-height: 20px 行高

文本属性连写:font: font-style font-weight font-size/line-height font-family (最好按照顺序)

注意:文本属性连写时文字大小和字体为必写项,其他可以不写

line-height

行高: 是基线和基线之间的距离(自行百度什么是基线)

注意: 一行文字的行高和其设置的height属性高度一致时,文字垂直居中

行高的单位有以下几个(推荐使用px为单位):

行高单位 文字大小 行高值
px(如 20px) 20px 20px
em(如 2em) 20px 40px
%(如 150%) 20px 30px
数字(如 2) 20px 40px

总结: 单位除了px之外,其余的都是与文字大小的乘积

行高单位 父元素文字大小 子元素文字大小 行高值
px(如 10px) 20px 30px 10px
em(如 2em) 20px 30px 40px
%(如 150%) 20px 40px 30px
数字(如 2) 20px 30px 60px

总结: 不带单位时,行高是与子元素大小相乘;em和%是行高是与父元素大小相乘;以px为单位,就是直接定义行高值(所以推荐使用px为单位)

文本修饰

text-decoration: none(默认,a标签使用这个能除去下划线) /  underline(下划线) /  line-through(删除线)

背景属性

background-color: #000 背景颜色

background-image: url(路径) 背景图片

background-repeat: repeat 背景平铺   repeat(背景图像将在垂直方向和水平方向重复) /  no-repeat(不平铺) /  repeat-x(沿x轴) /  repeat-y(沿y轴)

background-position: left top 背景定位

注意: 方位值只写一个时,另一个值默认居中;用数字(或百分号%)表示方位时,第一个值代表水平方向,第二个值代表垂直方向

background-attachment:  scroll 背景是否滚动  scroll(默认 滚动) /  fixed(固定)

背景属性连写: background: #fff url(路径) no-repeat 30px 40px fixed

注意: 连写没有顺序要求,但url为必写项

链接伪类

a:link { 属性:值;}  链接的默认状态

a:hover { 属性:值; }  鼠标放在链接上显示的状态

a:visited { 属性:值; }  链接访问之后的状态

a:active { 属性:值; }  链接激活的状态(鼠标点击不松)

补充: :focus选择器(用于选取获得焦点的元素)  如 标签:focus { 属性:值; }

补充:CSS三大特性

层叠性: 当多个样式作用于同一个标签,样式发生冲突时,总是执行后面的代码(和标签调用选择器的顺序没有关系)

继承性: 文字的所有属性都可以被继承

特殊情况: h系列不能继承文字大小; a标签不能继承文字颜色

优先级: 默认样式<标签样式<类选择器<ID选择器<行内样式< !important

注意: 继承的权重为0,与默认样式一样;权重可以叠加

CSS的常用属性(一)的更多相关文章

  1. CSS样式常用属性整理

    web工程师是最近5年刚刚兴起的一门高薪职业,人们的专注度越来越高. 那么前端除了学习html标签之外还需要掌握什么知识点呢? 为大家整理了一个和HTML标签密不可分的知识要点--<CSS样式常 ...

  2. CSS的常用属性

    刚开始学习前段的我,还处于初级阶段,一些东西还是会有搞不明白的时候,还是要大家多多理解.今说就一些关于CSS的常用属性吧! 一.CSS常用选择器 CSS选择器应该说是一个非常重要的工具吧,选择器用得好 ...

  3. CSS 背景常用属性

    CSS 背景常用属性 background-color 这个属性过于简单, 以下写法均可 background-color:red; background-color:rgb(0,0,255); ba ...

  4. css+div常用属性备忘录

    学习软件设计有一年多了,明年五月就要毕业了.回头看看发现自己其实挺差劲的. 最近开通了博客所以就整理了一下笔记,在这里发布一下自己以前学习css时总是记不住去翻书又很常用的属性,都是一些很基础的. 大 ...

  5. CSS HTML 常用属性备忘录

    学习软件设计有一年多了,明年五月就要毕业了.回头看看发现自己其实挺差劲的. 最近开通了博客所以就整理了一下笔记,在这里发布一下自己以前学习css时总是记不住去翻书又很常用的属性,都是一些很基础的. 大 ...

  6. css 样式常用属性

    一般的一个DIV的CSS设置属性有:margin,padding,width,height,font-size,text-align,background,float,border 附:< cs ...

  7. css之常用属性

    背景属性: background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动 值: scroll 默认值.背景图像会随着页面其余部分的滚动而移动. fixed 当页面的其余部 ...

  8. CSS的常用属性(三)

    静态定位 position: static (默认) 标准流 绝对定位 position: absolute 特点: 元素使用绝对定位之后,不占据原来的位置(脱标) 元素使用绝对定位,位置是从浏览器出 ...

  9. css 一些常用属性总结

    在项目中经常会用到一些很实用的css代码(*只做功能性记录,不追根究底,如有不合理的欢迎指正) css图片上下居中 /*图片上下居中代码*/ .imgvam { /*非IE的主流浏览器识别的垂直居中的 ...

随机推荐

  1. PHP开发错误锦集(持续更新)

    1.trait 命名问题. 问题:trait 里定义的方法找不到 <?php namespace app\controllers; trait Example { public function ...

  2. 手动部署tidb(二进制包)集群

    环境准备 系统:centos7.2 用户:root 主机配置ntp时间同步 主机配置ssh互信 3节点: hostname@ip 部署组件 tidb1@10.70.249.24 PD,TiKV,TiD ...

  3. Android DynamicGrid:拖曳交换位置

     Android DynamicGrid:拖曳交换位置 Android DynamicGrid是一个第三方开源项目,DynamicGrid在github上的项目主页是:https://github ...

  4. [Usaco2007 Dec]队列变换

    [Usaco2007 Dec]队列变换 题目 FJ打算带他的N(1 <= N <= 30,000)头奶牛去参加一年一度的“全美农场主大奖赛”.在这场比赛中,每个参赛者都必须让他的奶牛排成一 ...

  5. prime算法邻接表写法

    #include <iostream> #include <queue> using namespace std; typedef struct { long v; long ...

  6. nyoj_218_Dinner_201312021434

    Dinner 时间限制:100 ms  |           内存限制:65535 KB 难度:1   描述 Little A is one member of ACM team. He had j ...

  7. P1265 公路修建 洛谷

    https://www.luogu.org/problem/show?pid=1265 题目描述 某国有n个城市,它们互相之间没有公路相通,因此交通十分不便.为解决这一“行路难”的问题,政府决定修建公 ...

  8. 微信推送给服务器的XML消息解析-springmvc 解析xml数据流

    微信推送给服务器的XML消息解析: 可以使用request.getInputStream(); 获取输入的消息流:但是需要自己解析流: spring mvc自带解析功能: controller中: @ ...

  9. Graphics简单汇总

    1.主页面布局文件 activity_main.xml(仅仅有2个button按钮) <?xml version="1.0" encoding="utf-8&quo ...

  10. vue组件的一个总结

    用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维 ...