CSS常见属性和属性值

1.1 CSS 长度和颜色设置

三种长度单位：  px   em  %
三种颜色设置方式：  颜色名   rgb()   十六进制

1.2 CSS 选择器

标签名选择器
类名选择器
ID名选择器
全局选择器行内式 > ID名选择器 > 类名选择器 > 标签名选择器 > 全局选择器

1.3 盒子模型

1. 元素的三种显示模式块级元素： 独占一行 可以设置宽高行内元素： 不会独占一行 无法设置宽高行内块元素： 不会独占一行，可以设置宽高2. 如何设置元素的显示模式display: none / inline / inline-block / block

1.4 常用 CSS 属性

1. 字体属性font-familyfont-sizefont-weight   normal/bold/lighter/ 100~900font-style   normal/italicfont2. 文字颜色color3. 文本属性letter-spacing  字母间距word-spacing    单词间距text-decoration   none/underline/overline/line-throuthtext-indent     首行缩进text-align      left/center/rightvertical-align  baseline / top / bottom / middleline-height    行高

2 CSS 常用属性

2.1 背景属性

属性名	作用	属性值
background-color	背景颜色	颜色
background-image	背景图像	url(图片路径)
background-repeat	背景图像重复	repeat：水平方向和垂直方向都重复。 repeat-x：只在水平方向重复。 repeat-y：只在垂直反选重复。 no-repeat：不重复。
background-position	背景图像的位置	使用关键字设置位置或者使用长度表示的坐标
background-attachment	设置背景图像固定本质上设置的是图像在元素上坐标体系。	scroll：默认值，背景图像随元素滚动。 fixed：背景图像固定（background-position 坐标系是视口）
background	复合属性	子属性的值，多个值有空格隔开

① background-position 设置背景图像的位置

使用关键字设置图像位置：

设置两个值作为属性的值，使用空格隔开，先写水平方向位置，再写垂直方向位置

水平方向位置： left、right、center
垂直方向位置： top、bottom、center

background-posotion: right bottom;

使用长度表示的坐标设置图像位置：

元素左上角作为坐标原点，x轴方向从左到右，y轴方向从上到下；设置两个长度作为x坐标和y坐标，设置的是图像左上角在元素上的位置。

background-position: 10px 20px;

省略写法: 只设置一个值：

使用的是关键字：浏览器根据关键字自动判断设置的是水平位置还是垂直位置，另外取默认值 center
使用长度： 该长度被作为x坐标，垂直位置使用 center

background-position: bottom;  /* center bottom */
background-position: right;  /*right center*/
background-position: 100px;  /*100px center*/

② background 复合属性

把子属性的值作为background的值
没有数量要求也没有顺序要求

background: #f90;
background: #f90 url(images/bg.gif);
background: #f90 url(images/bg.gif) no-repeat;
background: #f90 url(images/bg.gif) no-repeat 100px 100px;

2.2 鼠标光标属性

属性名	作用	属性值
cursor	设置鼠标光标在元素上的样式	default：默认样式。 pointer：小手。 move：移动十字图标。

/* 自定义鼠标光标样式 */
cursor: url(images/arrow.ico), pointer;

2.3 列表属性

属性名	作用	属性值
list-style-type	设置列表项图标样式	none：没有图标，最常用。 disc：实心圆。 decicmal：数字。 …
list-style-image	自定义列表项图标	url(图片路径)
list-style-position	列表项图标的位置	outside：图标在 li 的外面。 inside：图标在 li 的里面。
list-style	复合属性	多个子属性的值，多个值用空格隔开。没有属性和数量要求

注意： 列表属性只有设置给 ul、ol、li 元素才会生效。

2.4 表格属性

属性名	作用	属性值
table-layout	设置列宽固定（列宽等分）	auto：自动，默认值。 fixed：固定，列宽等分。
border-collapse	设置合并单元格边框	collapse：合并单元格边框
border-spacing	设置单元格之间的间距生效前提：不能设置 border-collapse	长度
empty-cells	设置空单元格是否显示生效前提：不能设置 border-collapse	show：显示，默认值。 hide：空单元格不显示。
caption-side	设置表格标题在表格上面还是下面	top：标题在表格上面。 bottom：标题在表格下面。

注意： 表格相关 CSS 属性只有设置给 table 元素才有效果！

CSS常见属性和属性值相关推荐

colordialog通过哪属性取其颜色_IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值1...
CSS中的样式属性比较多,经常使用的属性可以分为这么几类:字体.文本.背景.位置.边框.列表,以及其他一些样式属性.每个类中的属性都可以单独使用:如果同一个类中多个属性一起使用,还可以将它们整合为一行 ...
css 如何重设外部样式的属性值_IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值5...
CSS综合实例在Web页面中经常使用栏目显示分类内容.本例将使用HTML和CSS结合编写一个分类栏目模型,用于演示前面介绍的CSS应用.通过使用独立的文件定义样式表,并在HTML文档中使用link标 ...
html css 鼠标手,CSS cursor 和 opacity 属性
cursor :一些不同的光标,当设置该属性之后,鼠标指上去会随着属性而改变. 举例: 十字线默认的帮助指示某对象可被移动出现左右箭头一只手正在加载文本 opacity:用于设置元素的透 ...
CSS属性以及属性值（样式）
前面讲解了CSS的各种规定,具体能应用到哪些方面呢? (一)文字排版 1.字体我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性.下面我们来看一个例子,下面代码实现:为网页中的文字设 ...
2_31_CSS 属性、CSS与CSS3的属性值和单位_191022
css属性 font-family font-size font-style color 一.CSS属性值和单位 1.字符如果值为若干单词,则要给值加引号. 如:p{ font-family:&qu ...
DIV+CSS布局概述、属性（浮动、定位等）、布局类型、常见布局技巧
文章目录布局概述网页布局页面元素定位机制布局常用属性浮动属性(float) 清除属性(clear) 定位属性(position) 溢出属性(overflow) 层叠属性(Z-index) 布 ...
[css] 举例说明css有哪些简写的属性和属性值？
[css] 举例说明css有哪些简写的属性和属性值? border: solid 1px red;border-style: solid; border-width: 1px; border-colo ...
[css] css中的选择器、属性、属性值区分大小写吗？
[css] css中的选择器.属性.属性值区分大小写吗? 选择器和属性区分大小写,属性值如果是颜色可以不区分大小写吧个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢 ...
学习CSS的background属性及其取值（实践）
CSS的背景属性属性描述可用值 background 设置背景的所有控制选项其他背景属性可用值的集合 background-color 设置背景颜色命名颜色.十六进制颜色等 backgrou ...

CSS常见属性和属性值

1.1 CSS 长度和颜色设置

1.2 CSS 选择器

1.3 盒子模型

1.4 常用 CSS 属性

2 CSS 常用属性

2.1 背景属性

① background-position 设置背景图像的位置

② background 复合属性

2.2 鼠标光标属性

2.3 列表属性

2.4 表格属性

CSS常见属性和属性值相关推荐

最新文章

热门文章