CSS的常用属性(一)
文本属性
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的常用属性(一)的更多相关文章
- CSS样式常用属性整理
web工程师是最近5年刚刚兴起的一门高薪职业,人们的专注度越来越高. 那么前端除了学习html标签之外还需要掌握什么知识点呢? 为大家整理了一个和HTML标签密不可分的知识要点--<CSS样式常 ...
- CSS的常用属性
刚开始学习前段的我,还处于初级阶段,一些东西还是会有搞不明白的时候,还是要大家多多理解.今说就一些关于CSS的常用属性吧! 一.CSS常用选择器 CSS选择器应该说是一个非常重要的工具吧,选择器用得好 ...
- CSS 背景常用属性
CSS 背景常用属性 background-color 这个属性过于简单, 以下写法均可 background-color:red; background-color:rgb(0,0,255); ba ...
- css+div常用属性备忘录
学习软件设计有一年多了,明年五月就要毕业了.回头看看发现自己其实挺差劲的. 最近开通了博客所以就整理了一下笔记,在这里发布一下自己以前学习css时总是记不住去翻书又很常用的属性,都是一些很基础的. 大 ...
- CSS HTML 常用属性备忘录
学习软件设计有一年多了,明年五月就要毕业了.回头看看发现自己其实挺差劲的. 最近开通了博客所以就整理了一下笔记,在这里发布一下自己以前学习css时总是记不住去翻书又很常用的属性,都是一些很基础的. 大 ...
- css 样式常用属性
一般的一个DIV的CSS设置属性有:margin,padding,width,height,font-size,text-align,background,float,border 附:< cs ...
- css之常用属性
背景属性: background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动 值: scroll 默认值.背景图像会随着页面其余部分的滚动而移动. fixed 当页面的其余部 ...
- CSS的常用属性(三)
静态定位 position: static (默认) 标准流 绝对定位 position: absolute 特点: 元素使用绝对定位之后,不占据原来的位置(脱标) 元素使用绝对定位,位置是从浏览器出 ...
- css 一些常用属性总结
在项目中经常会用到一些很实用的css代码(*只做功能性记录,不追根究底,如有不合理的欢迎指正) css图片上下居中 /*图片上下居中代码*/ .imgvam { /*非IE的主流浏览器识别的垂直居中的 ...
随机推荐
- C语言考试
1.如何定义一个占用空间为0的变量 2.c++如何在指定内存区域创建对象 3.gcc动态库如何调用宿主执行文件的函数,阐述动态链接库的两种加载方式 4.static有什么用处 5.阐述do{...}w ...
- windows桌面远程工具连接Ubuntu
1.Ubuntu安装:sudo apt-get install xrdp sudo apt-get install vnc4server sudo apt-get install xubuntu ...
- Pyspider爬虫简单框架——链家网
pyspider 目录 pyspider简单介绍 pyspider的使用 实战 pyspider简单介绍 一个国人编写的强大的网络爬虫系统并带有强大的WebUI.采用Python语言编写,分布式架构, ...
- Beetl学习总结(3)——高级功能
3.1. 配置GroupTemplate Beetl建议通过配置文件配置配置GroupTemplate,主要考虑到未来可能IDE插件会支持Beetl模板,模板的属性,和函数等如果能通过配置文件获取,将 ...
- UVALIVE 6958 Indoorienteering
题目大意:有不超过14个点组成的完全图,给出邻接矩阵,问是否存在长度为W的欧拉回路? 数据范围:n<=14, w<=1e15: standard input/output 7 s, 256 ...
- [Codeforces 872]比赛记录
强行打了$cf$上的第一场比赛,现在感觉自己的$rating$会炸飞= = A 这是练习输入输出吗QAQ,竟然$WA$了两遍QAQ,我$WA$的一声就哭了出来啊QAQ B 好像很水的乱扫就好了,m ...
- nyoj_33_蛇形填数_201308221636
蛇形填数时间限制:3000 ms | 内存限制:65535 KB 难度:3描述 在n*n方陈里填入1,2,...,n*n,要求填成蛇形.例如n=4时方陈为:10 11 12 19 16 13 28 ...
- [bzoj1855][Scoi2010]股票交易_动态规划_单调队列
股票交易 bzoj-1855 Scoi-2010 题目大意:说不明白题意系列++...题目链接 注释:略. 想法:这个题还是挺难的. 动态规划没跑了 状态:dp[i][j]表示第i天手里有j个股票的最 ...
- hibernate之一对多映射
目录 第一章 课程简介 第二章 Hibernate中的单向一对多关联 2-1 一对多映射简介 2-2 hibernate的基础配置 2-3 创建HibernateUtil工具类 2-4 在mysql数 ...
- springmvc mybatis 分页插件 pagehelper
springmvc mybatis 分页插件 pagehelper 下载地址:pagehelper 4.2.1 , jsqlparser 0.9.5 https://github.com/pagehe ...