文本属性

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. 准备MPI编程环境——Visual Studio

    准备 下载并安装Visual Studio 2017 下载并安装MPI  (建议使用MSMPI,相对简单方便一点,可以从微软官网下载获得) 配置 新建空白项目 在该项目中新建源文件 右击项目-> ...

  2. python第十二周:MySql

    MySql数据库 MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司.MySQL 是一种关联数据库管理系统,关联数据库将数据保存在不同的表中,而不 ...

  3. 使用Python PIL库中的Image.thumbnail函数裁剪图片

    今天,是我来到博客园的第五天,发现自己还没有头像,想着上传ubuntu系统中我很喜欢的一个背景图片来当头像,但是因为图片过大,上传失败了.那么,我们如何使用python中强大的PIL库来进行图片裁剪呢 ...

  4. PAT 1111 Online Map

    Input our current position and a destination, an online map can recommend several paths. Now your jo ...

  5. 6.3.1 使用 pickle 模块读写二进制文件

    Python 标准库 pickle 提供的 dump() 方法 用于将数据进行序列化并写入文件(dump() 方法的protocol 参数为True 时可以实现压缩的效果),而load() 用于读取二 ...

  6. ES6的let和var声明变量的区别

    关于let的描述 let允许你声明一个作用域被限制在块级中的变量.语句或者表达式.与var关键字不同的是,它声明的变量只能是全局或者整个函数块的. 作用域规则 let声明的变量只在其声明的块或子块中可 ...

  7. FOJ2250 不可能弹幕结界

    Problem 2250 不可能弹幕结界 Time Limit: 1000 mSec    Memory Limit : 65536 KB Problem Description 咲夜需要穿过一片弹幕 ...

  8. noip模拟赛 PA

    分析:很显然这是一道搜索题,可能是由于我的搜索打的太不美观了,这道题又WA又T......如果对每一个询问都做一次bfs是肯定会T的,注意到前70%的数据范围,N的值都相等,我们可以把给定N的所有情况 ...

  9. noip模拟赛 党

    分析:一道非常恶心的dp题.每个人要么选或不选,很像是0-1背包,可以套用背包问题的状态,但是因为题目要求3个值,所以可以再加一维表示3个答案. f[i][j][k][l][p][0/1/2]表示i个 ...

  10. K - Count the string kmp_Next数组应用

    It is well known that AekdyCoin is good at string problems as well as number theory problems. When g ...