从零开始html css,HTML/CSS从零开始-常用属性(三)
一、css文本属性
(1)文本大小{font-size:value;}
单位:pt:9pt=12px;浏览器默认字体大小为16px
em:1em=16px;
在CSS2.0中
xx-small:9px
x-small:11px
small:13px
medium:16px
large:19px
x-large:23px
xx-large:27px
(2)字体颜色
{color: rbg250,250,250/#000000/red;}
(3)文本字体{font-family:"字体1","字体2","字体三";}
浏览器按字体解读
注意:字体名为中文时加双引号:“微软雅黑”;单个英文单词可不加:Arial;英文有空格加引号:“Times New Romen”;
(4)字体加粗{font-weight:;}
属性值:normal/500(常规);bold/600-900(加粗);bolder(更粗);
(5)文字倾斜
{font-style:itatic(斜体字)/oblique(倾斜的文字)/normal(取消倾斜)}
(6)水平对齐方式
{text-align:left/center/right/justify(两端对齐);}
(7)垂直对齐方式
{vertical-align:top/bottom/middle;}
(8)文本行高
{line-height:normal/value;}
测量行高:本行文字的顶部到下一行文字的顶部;
单行文本:行高=容器高时,垂直居中;行高
说明:font简写顺序: font-style font-weight font-size/line-height font-family;
{normal 600 16px "微软雅黑";}
(9)文本修饰
{text-decoration:none/underline(下划线)/overline(下划线)/line-through(添加删除线)}
扩展:添加删除线
(10)首行缩进
{text-indent:value;}
value是字的个数单位为:em;
text-indent为负值,往前退
只对文本首行起作用
(11)字间距
{letter-spacing:value;}
控制英文字母与汉字之间的距离
扩展:{word-break:break-all;}=
换行
二、边框
{border-top/bottom/right/left:1px solid/dotted/dashed/double;}
三、CSS列表属性
(1)列表符号样式
{list-style-type:disc(实心圆)/circle(空心圆)/squrare(空心方宽)/none(去掉列表符号);}
{list-style-type:none}同等于{list-style;none;}
(2)图片作为列表符号
{list-style-image:url();}
(3)定义列表符号位置
{list-style-position:ouside/inside;}
(4)去掉列表符号
{list-style:none;}
四、背景属性
(1)背景颜色{background-color:value;}
(2)背景图片{background-image:url(路径);}
(3)背景图平铺{background-repeat:no-repeat(不平铺)/repeat(平铺)/repeat-x(水平铺)/repeat-y(垂直平铺);}
(4)背景图固定{background-attachment:scroll(滚动)/fixed(固定);}
(5)背景图位置{background-position:x y(数值:50px 50px;方向:right bottom;)}
方向位置有:水平(left/center/right)垂直(top/center/bottom)
(6)简写:{background:url() no-repeat center top fixed #f00;}
{background:url() no-repeat center 100px #f00 scroll;}
五、网页常用的图片格式
(1)jpg:有损压缩 损失质量 适用颜色丰富的图像
(2)gif:有损压缩 损失色彩 支持透明、动画 适用颜色较少的图像
(3)png:损失图片色彩较少,不支持动画,支持透明,是fireworks;
说明:要求高存png,要求更高存gif,兼容时使用gif;
六、浮动(让竖立的元素横着排)
{float:left/right/none}
(1)清除浮动{clear:left/right/both;}
说明:浮动之后的元素是脱离文档流是悬浮在上面的,当你浮动元素的前面那个元素是标准流中的元素时(没有浮动)
浮动之后的元素的位置是靠浏览器的,浮动元素后面的没有浮动的元素会挤进浮动元素原来的位置。
(2)解决高度塌陷
高度塌陷:产生的条件父级元素没有写高度,子元素浮动;
解决办法:(1)在浮动元素的最后加一个空的
,给这个div写上声明div{clear:both;}
(2)在css中给父级元素添加一个声明,div{overflow:hidden;}
七、盒模型
1、定义:网页元素如何显示以及相互关系。
边框 边界 补白 内容区
2、padding(补白)
(1)填充:padding在设定页面中的一个元素中一个元素内容到元素的边缘(边框)之间的距离,补白;
(2)用来调整内容在容器中的位置关系
(3)用来调整子元素在父级元素中的位置
(4)padding属性加在父级元素上面
关于padding值减不减问题?
1、减:父级元素有宽高
2、不减:父级元素没有宽高;
(5)如何减?
高-(top+bottom);宽-(left+right);
3、语法:
四个值:{padding:top right bottom left;}
一个值:{padding:20px}={padding:20px 20px 20px 20px;}
二个值:{padding:20px 30px;}={padding:20px 30px 20px 30px;}
二个值:{padding:20px 30px 40px;}={padding:20px 30px 40px 30px;}
拆分:{padding-top/right/bottom/left:value;}
2、margin
(1)边际:margin在设定页面中元素外边的空白区;
(2)margin属性加在子级元素上面
(3)语法:
四个值:{margin:top right bottom left;}
一个值:{margin:20px}={padding:20px 20px 20px 20px;}
二个值:{margin:20px 30px;}={padding:20px 30px 20px 30px;}
二个值:{margin:20px 30px 40px;}={padding:20px 30px 40px 30px;}
拆分:{margin-top/right/bottom/left:value;}
从零开始html css,HTML/CSS从零开始-常用属性(三)相关推荐
- css2.0圆角,CSS圆角效果-CSS3常用属性集合
CSS3使用注意项:早期的firefox chrome 等某些游览器中也实现了部分CSS3,所以为了兼容部分,在CSS3中的编写,需要如此: {-moz-border-radius: 4px; -we ...
- html网页让字体浮动的颜色,HTML/CSS从零开始-常用属性(三)(示例代码)
一.css文本属性 (1)文本大小{font-size:value;} 单位:pt:9pt=12px;浏览器默认字体大小为16px em:1em=16px; 在CSS2.0中 xx-small:9px ...
- css:input button常用属性以及将button嵌入到input中
1.鼠标经过button变成小手 //css属性 cursor:pointer; 2.清除button默认边框 border: none; 3.清除input默认边框 outline: 0; 4.设置 ...
- Css 特殊或不常用属性
1. -webkit-font-smoothing: antialiased; CSS3中用于webkit引擎(如chrome)中设置字体的抗锯齿或者说光滑度的属性.有3个属性:none用于小像素的文 ...
- css知识点笔记-常用属性
css知识点范围:常用属性 删除线:text-decoration : line-through 下划线:text-decoration : underline 斜体:font-style : ita ...
- 从零开始学前端 - 5. CSS常用属性
作者: 她不美却常驻我心 博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享 每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...
- 从零开始学前端:CSS字体属性和文本属性 --- 今天你学习了吗?(CSS:Day08)
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS引入 - 今天你学习了吗?(CSS:Day07) 文章目录 从零开始学前端:程序猿小白也可以完全掌握 ...
- 从零开始学前端:CSS背景颜色 --- 今天你学习了吗?(CSS:Day09)
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS字体属性和文本属性 - 今天你学习了吗?(CSS:Day08) 文章目录 从零开始学前端:程序猿小白 ...
- 从零开始学前端:CSS引入 --- 今天你学习了吗?(CSS:Day07)
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:列表标签 - 今天你学习了吗?(CSS:Day06) 文章目录 从零开始学前端:程序猿小白也可以完全掌握! ...
最新文章
- 在 Spring 4.3.9下升级 Velocity 1.7.x to Velocity 2.0.x 出现的问题
- 解决apt-get /var/lib/dpkg/lock-frontend 问题
- android SQLite数据库(转)
- Spring MVC中使用Swagger生成API文档和完整项目示例Demo,swagger-server-api(二十)
- what should you do if you want to become an expert in one domain
- python中log1p用法_python中logging模块的基本用法
- php.ini 老薛,出现Allowed memory size of 134217728 bytes exhausted怎么办?
- MySQL 关联表批量修改(数据同步)
- 我还在生产玩 JDK7,JDK 15 却要来了!|新特性尝鲜
- 如何在macOS Big Sur的Voice Memos中使用增强录音和智能文件夹?
- sqlitepython导入数据_Python导入excel数据到sqlite;
- 软考(计算机软件水平考试)程序员介绍
- oracle dmp和sql文件区别,数据库dbf与dmp文件
- redux 多种触发dispatch方式
- 接口中的变量public static final
- 叼丝装备之服装必备----111111111111111111111111111111111
- 双远心镜头原理及选型(一)
- Android Studio 好用的插件
- 【机器学习的数学基础】(四)解析几何(Analytic Geometry)(上)
- 补题:西南民族大学第十一届程序设计竞赛(同步赛)
热门文章
- 什么是TCP和UDP?—Vecloud微云
- cs231n 学习笔记(5)——神经网络part1:建立神经网络架构
- 细说plsql中的空值表达式
- Python 3.X 练习集100题 02
- React路上遇到的Bug
- 构造函数的理解(构造函数与 init 方法)
- Javascript 中的 Function对象
- 深入浅出 Javascript API(五)--Query Find 查询
- IBM发布IBM Watson创新功能,旨在帮助企业扩展AI使用
- matlab频域怎么提取特征值,补充:频域特征值提取的MATLAB代码实现(小波分析)...