HTML学习 day04
2019-11-28 16:00:24来源:博客园 阅读 ()
1、字体、文本声明
声明语句必须要包含在{}号之中;
属性和属性值之间用“:”分隔;
当有多个属性时,用“;”进行区分;
在书写属性时属性之间使用空格、换行等,并不影响属性的显示;
如果一个属性有多个值,则每个属性值之间用空格分隔开。
CSS属性-字体
font-size 字体大小属性:可设置字体的大小,常用单位px。网页默认大小16px
font-style 字体风格属性:设置字体是否倾斜。font-style:normal/italic/oblique 分别为正常/斜体
font-weight 字体加粗属性:设置字体加粗。font-weight:normal/100-900/bold/bolder 分别为正常/加粗
font-family 字体名称属性:设置字体名称。font-family:"字体名称"
text-align 文本对齐属性:设置文本对齐格式。text-align:top/bottom/middle/justify(两端对齐)
vertical-align 垂直对齐方式。vertical-align:top/bottom/middle
line-height 行高属性:设置行距。line-height:数值/倍数
text-decoration 文本修饰属性:设定文本划线属性
语法:text-decoration:none/underline(下划线)/overline(上划线)/line-through(删除线)/blink(文字闪烁)
letter-spacing 设置文本字符间距。控制字母或者汉字的间距
word-sapcing 设置单词字母间距。
text-transform 大小写切换。text-transform:none/capitalize(每个字母大写开头)/uppercase(仅有大写字母)/lowercase(仅有小写字母)
font-variant:normal/small-caps/inherit 小型大写字母 规定应该从父元素继承
font:font-weight font-style font-size/ line-height font-family; 文字属性的缩写
注意:文字缩写属性必须要在font-size和font-family同时存在时才会生效
其中font-weight 和font-style没有会使用缺省值。
font-size和line-height必须以"/"(反斜杠)连接。
文字属性的简写必须按照此顺序
color 颜色属性。color:颜色;
width 宽度属性。值为数值,单位px/%
height 高度属性。值为数值,单位px/%
2、列表的声明
CSS属性-列表
定义列表符号样式:1.list-style-type:disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号)
2.使用图片作为符号:list-style-image:url(所使用图片的路径及全称)
3.定义列表符号位置:list-style-position:outside/inside
3、背景的声明
CSS属性-背景
background-color 为元素设置背景色
background-image 为元素设置背景图。background-image:url(图片的路径及全称)
background-repeat 设置背景图是否平铺。
语法:background-repeat:repeat/repeat-x/repeat-y/no-repeat
background-position 背景定位属性,设置背景图片属性,
通过方向或者数值来设置:left top;或者0px 0px;分别表示水平位置和垂直位置
background-attachment 背景附着属性,设定图片是否跟随内容滚动 值:scroll/fixed
语法:background:背景颜色 背景图像 背景位置 背景重复 背景附着
4、浮动的详细讲解
CSS属性-浮动
网页元素的三种位置方式
1.普通流:普通流中元素框的位置由元素在XHTML中的位置决定。元素从上到下依次排列
2.浮动:浮动的元素脱离普通流。浮动的元素可以在左右移动,直到它的外边框边缘碰到包含块或另一个浮动元素的边缘。
3.定位float:none/left/right; 左/右浮动。浮动框是脱离了普通的文档流 clear:none/left/right/both 无/左/右/全部不允许浮动
原文链接:https://www.cnblogs.com/pp-yang/p/11950737.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:css+js相关笔记
- DIV居中的经典方法 2020-06-13
- Html/css 列表项 区分列表首尾 2020-06-11
- HTML骨架 2020-06-10
- 转行Web前端工程师要掌握的学习知识汇总 2020-06-10
- HTML基础教程_1 2020-06-09
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash