初探HTML之CSS篇(属性)

前言

I am a slow walker,but I never walk backwards.


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

设置字符间距

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

在元素之后添加内容


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

原文发布于微信公众号 - 大数据钻研(bigdata118)

原文发表时间:2017-01-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Danny的专栏

HTML基本语法

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

20820
来自专栏闻道于事

JavaScript事件(二)

例题顺序: 1.子菜单下拉 2.图片轮播 3.选项卡效果 4.进度条制作 5.滑动效果 6.滚动固定效果 1.子菜单下拉 1 <!DOCTYPE html...

26960
来自专栏河湾欢儿的专栏

表格案例

13520
来自专栏前端萌媛的成长之路

元素垂直居中和水平居中的方法

17320
来自专栏Android干货

自定义控件详解(一):Paint类与Canvas类

19940
来自专栏十月梦想

背景属性

8130
来自专栏mukekeheart的iOS之旅

Android layout属性大全

第一类:属性值 true或者 false  android:layout_centerHrizontal 水平居中         android:layo...

28290
来自专栏小工匠技术圈

[Java小工匠]CSS背景1-概述

background-image 属性为元素设置背景图像。 元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。 默认地,背景图像位于元素的左上角...

7820
来自专栏菜鸟计划

CSS布局(六) 对齐方式

一、水平居中: (1). 行内元素的水平居中? 如果被设置元素为文本、图片等行内元素时,在父元素中设置text-align:center实现行内元素水平居中,将...

37650
来自专栏张俊红

网页的修饰

总第61篇 上一篇推送了网页的基本构成,链接地址:网页是怎么构成的?,这篇来讲讲网页的修饰,正如字面意思一般,本篇分享的内容是用来修饰网页的,是让网页变得更加好...

39270

扫码关注云+社区

领取腾讯云代金券