0

0

初探HTML之CSS篇(属性)

高洛峰

高洛峰

发布时间:2017-02-08 09:49:01

|

1564人浏览过

|

来源于php中文网

原创

CSS(层叠样式表)

css是一种用来表现html或xml等文件样式的计算机语言。css不仅可以静态修饰网页,还可以配合各种脚本语言动态地对网页哥元素进行格式化。

CSS能够对网页中元素位置的排版进行像素精确控制,几乎支持所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

CSS 尺寸属性(Dimension)

height 设置元素高度
width 设置元素宽度
max-height 设置元素的最大高度
max-width 设置元素的最大宽度
min-height 设置元素的最小高度
min-width 设置元素的最小宽度

CSS 背景属性(Background)

立即学习前端免费学习笔记(深入)”;

background 在一个声明中设置所有的背景属性
background-color 设置元素的背景颜色
background-image 设置元素的背景图片

background-position 设置背景图片的位置

top 上方

right 右方

left  左方

center 中间

background-repeat 设置背景图片的重复方式

repeat 全部重复

repeat-x 横向重复

repeat-y 纵向重复

no-repeat 不重复
background-attachment 背景图片是否随着页面的滚动而滚动

CSS边框属性(Border和Outline)

属性

描述

border    设置所有的边框属性    

border-bottom    设置下边框    

border-bottom-color    设置下边框的颜色    

border-botton-style    设置下边框的样式    

border-botton-width    设置下边框的宽度    

border-color    设置四条边框的颜色    

border-left    设置左边框    

border-left-color    设置左边框的颜色    

border-left-style    设置左边框的样式    

border-left-width    设置左边框的宽度    

border-right-    设置右边框    

border-right-color    设置右边框的颜色    

border-right-style    设置右边框的样式    

border-right-width    设置右边框的宽度    

border-style    设置四条边框的样式    

solid    样式为实线    

double    双实线(宽度为1px 看不见效果)    

dottde    点状线 (在IE6/7下表现为实线)    

dashed    虚线(在IE6/7下表现为实线)    

border-top    设置上边框    

border-top-color    设置上边框的颜色    

border-top-style    设置上边框的样式    

border-top-width    设置上边框的宽度    

border-width    设置四条边框的宽度    

outline    设置所有的轮廓属性    

outline-color    设置轮廓的颜色    

outline-style    设置轮廓的样式    

outline-width    设置轮廓的宽度    

border-bottom-left-radius    定义边框左下角的形状    

border-bottom-right-radius    定义边框右下角的形状    

border-top-left-radius    定义边框左上角的形状    

border-top-right-radius    定义边框右上角的形状    

border-radius    简写属性,设置所有四个border-*-radius属性    

border-image    简写属性,设置所有border-image-*属性    

border-image-outset    规定边框图像区域超出边框的量    

border-image-repeat    图像是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)    

border-image-slice    规定图像边框的向内偏移    

border-image-width    规定图片边框的宽度    

border-image-source    规定用作边框的图片    

box-shadow    向方框添加一个或多个阴影    

CSS 字体属性(Font)

属性

描述

font    设置所有的字体属性    

font-family    设置文字的字体系列    

font-size    设置文字的字体尺寸    

font-size-adjust    为元素规定aspect值    

font-stretch    收缩或拉伸当前的字体系列    

font-style    设置文字的字体样式    

font-variant    设置文字中英文的打开方式    

font-weight    设置文字粗细    

text-align 设置文字的对齐方式

center 居中  left 左对齐 right 右对齐

letter-spacing 设置文字间距

text-decoration设置文字修饰线

none 主要用于去除 a 标签的下划线

underline 下划线

overline 上划线

line-through 删除线

注意:如果一个子元素放置另一个元素(父元素)内,给父元素设置 text-decoration 会发现子元素的text-decoration无法清除干净

解决方案:
1、使用绝对定位  position: ansolute
2、设置浮动 float

text-transform 设置大小写转换

uppercase 所有单词全部大写

lowercase 所有单词全部小写

capitalize 将首字母进行大写

font-style 设置文字样式

normal 正常

italic 斜体字

oblique 倾斜的文字

font-variant设置文字中英文的打开方式

nomal 正常

small-caos 英文编程大写,并以小字号进行展示

CSS 文本属性(Text)

属性

描述

color    设置文本的颜色    

direction    规定文本的方向/书写方向    

letter-spacing    设置字符间距    

易达中小企业CMS管理系统1.8.6
易达中小企业CMS管理系统1.8.6

初次使用易达CMS企业系统以下简称(易达),易达系统运行于微软公司开发的 ASP 程序平台,ASP是目前国内应用最广泛的WEB开发语言,空间基于微软windows IIS,使您的购买空间和维护成本降到最低,并以其众多独创或领先的新特性和功能设计,使得用户深刻体验到易达以原创研发、服务客户为主导开发理念的独到之处和领先优势,易达严格上讲是为懂点网站建设和HTML或DIV+CSS技术的人员而开发的一套

下载

line-height    设置行高    

text-align    规定文本的水平对齐方式    

vertical-align    规定文本的垂直对齐方式    

text-decoration    规定添加到文本的装饰效果    

text-indent    规定文本首行的缩进    

tex-transform    控制文本的大小写    

unicode-bidi    设置文本方向    

white-space    规定如何处理元素中的空白    

word-spacing    设置单词间距    

CSS 表格属性(Table)

属性

描述

border    设置边框    

border-color    设置边框颜色    

cellspacing    设置表格框线的宽度    

cellpadding    设置数据与框线的距离    

background-color    设置表格的背景颜色    

background-url    设置表格的背景图片    

colspan    横向合并单元格    

rowspan    纵向合并单元格    

合并单元格的四部曲

 1、确定单元格从那个单元格开始合并
 2、确定单元格是纵向合并还是横向合并  3、确定需要合并几个单元格  4、处理多余的单元格

CSS列表属性(List)

属性

描述

list-style    在一个声明中设置所有的列表属性    

list-style-image    将图像设置为列表项标记    

list-style-position    设置列表项标记的放置位置    

inside    将列表样式放入content中    

outside    默认,列表样式不在content中,一般在psdding内    

list-style-type    设置列表项标记的类型    

复合写法

list-style    1、类型   2、位置  3、图片

清除默认样式

padding: 0px;

margin:0px;

list-style:none;

CSS 外边距属性(Margin)

属性

描述

margin    在一个声明中设置所有外边距属性    

margin-top    设置元素的上外边距    

margin-right    设置元素的右外边距    

margin-bottom    设置元素的下外边距    

margin-left    设置元素的左外边距    

CSS 内边距属性(Padding)

属性

描述

padding    在一个声明中设置所有内边距属性    

padding-top    设置元素的上内边距    

padding-right    设置元素的右内边距    

padding-bottom    设置元素的下内边距    

padding-left    设置元素的左内边距    

CSS 定位属性(Positioning)

属性

描述

position    规定元素的定位类型    

bottom    设置定位元素下外边距边界与其包含块下边界之间的偏移    

right    设置定位元素右外边距边界与其包含块右边界之间的偏移    

left    设置定位元素左外边距边界与其包含块左边界之间的偏移    

top    设置定位元素上外边距边界与其包含块上边界之间的偏移    

overflow    规定当内容溢出元素框时发生的事情    

cursor    规定要显示的光标的类型    

float    规定框是否应该浮动    

display    规定元素应该生成的框的类型    

vertical-align    设置元素的垂直对齐方式    

visibility    规定元素是否可见    

z-index    设置元素的堆叠顺序    

CSS 伪类(Pseudo-classes)

属性

描述

:active    向被激活的元素添加样式    

:focus    向拥有键盘输入焦点的元素添加样式    

:hover    当鼠标悬浮在元素上方时,向元素添加样式    

:link    向未被访问的链接添加样式    

:visited    向已被访问的链接添加样式    

:lang    向带有指定lang属性的元素添加样式    

CSS 为元素(Pseudo elements)

属性

描述

:first-letter    向文本的第一个字母添加特殊样式    

:first-line    向文本的首行添加特殊样式    

:bofore    在元素之前添加内容    

:after    在元素之后添加内容    

结束语

简单不先于复杂,而是在复杂之后

更多初探HTML之CSS篇(属性)相关文章请关注PHP中文网!

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
Java 桌面应用开发(JavaFX 实战)
Java 桌面应用开发(JavaFX 实战)

本专题系统讲解 Java 在桌面应用开发领域的实战应用,重点围绕 JavaFX 框架,涵盖界面布局、控件使用、事件处理、FXML、样式美化(CSS)、多线程与UI响应优化,以及桌面应用的打包与发布。通过完整示例项目,帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。

37

2026.01.14

php与html混编教程大全
php与html混编教程大全

本专题整合了php和html混编相关教程,阅读专题下面的文章了解更多详细内容。

19

2026.01.13

PHP 高性能
PHP 高性能

本专题整合了PHP高性能相关教程大全,阅读专题下面的文章了解更多详细内容。

37

2026.01.13

MySQL数据库报错常见问题及解决方法大全
MySQL数据库报错常见问题及解决方法大全

本专题整合了MySQL数据库报错常见问题及解决方法,阅读专题下面的文章了解更多详细内容。

19

2026.01.13

PHP 文件上传
PHP 文件上传

本专题整合了PHP实现文件上传相关教程,阅读专题下面的文章了解更多详细内容。

16

2026.01.13

PHP缓存策略教程大全
PHP缓存策略教程大全

本专题整合了PHP缓存相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.13

jQuery 正则表达式相关教程
jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全,阅读专题下面的文章了解更多详细内容。

3

2026.01.13

交互式图表和动态图表教程汇总
交互式图表和动态图表教程汇总

本专题整合了交互式图表和动态图表的相关内容,阅读专题下面的文章了解更多详细内容。

45

2026.01.13

nginx配置文件详细教程
nginx配置文件详细教程

本专题整合了nginx配置文件相关教程详细汇总,阅读专题下面的文章了解更多详细内容。

9

2026.01.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

AngularJS教程
AngularJS教程

共24课时 | 2.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号