CSS中的样式属性

最新推荐文章于 2022-04-21 21:33:09 发布

怪弹幕

最新推荐文章于 2022-04-21 21:33:09 发布

阅读量234

点赞数

分类专栏： CSS笔记文章标签： css html

本文链接：https://blog.csdn.net/SORYUSHIKINAMI/article/details/105813103

版权

CSS笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文本属性

CSS 文本属性可定义文本的外观。
通过文本属性，可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

color：设置文本颜色
color_name 规定颜色值为颜色名称的颜色（比如 red。
hex_number 规定颜色值为十六进制值的颜色（比如 #ff0000。
rgb_number 规定颜色值为 rgb 代码的颜色（比如 rgb(255,0,0)。
行间距：line-height:
设置行间距离; 不允许使用负值。
单行文字可实现元素的垂直居中; 默认继承父元素line-height。
文本缩进 text-indent：
有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值；
可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素；
使用负值；使用百分比；text-indent 属性可以继承；
水平对齐 text-align：
它会影响一个元素中的文本行互相之间的对齐方式；
值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。
文本修饰 text-decoration：
这个属性主要设定文本划线的属性：
none (无，缺省值) underline (下划线) overline (上划线) line-through (当中划线)
字间隔 word-spacing：
可以改变字（单词）之间的标准间隔其默认值 normal 与设置值为 0 是一样的
属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近
字母间隔 letter-spacing：
字母间隔修改的是字符或字母之间的间隔；
letter-spacing 属性的可取值包括所有长度。默认关键字是 normal。
字符转换 text-transform：
处理文本大小写；none 文本正常显示；uppercase 文本全部转换为大写；lowercase 文本全部转换为小写；capitalize 首字母大写。
处理空白符white-space：
清除源文档中的字符空格，包括换行
默认属性值：normal 禁止换行：nowrap。

字体属性：

字体变形font-variant：
normal 默认值。浏览器会显示一个标准的字体。
small-caps 浏览器会显示小型大写字母的字体。
inherit 规定应该从父元素继承 font-variant 属性的值。
字体风格font-style：
font-style 属性最常用于规定斜体文本 normal - 文本正常显示
italic - 文本斜体显示 oblique - 文本倾斜显示
指定字体系列 font-family:
使用 font-family 属性定义文本的字体系列，如Microsoft 微软雅黑 “宋体等”。
字体加粗font-weight：
使用bold将文本字体加粗。
关键字100 ~ 900为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。
font-size 字体大小：
设置文本大小。有能力管理文本大小在 web 设计领域很重要。尽量避免通过调整文本大小使段落看上去像标题或者使标题看上去像段落。
font-size可以是绝对值或是相对值；如果您没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。
（可使用像素来设置字体大小，通过像素设置文本大小，可以对文本大小进行完全控制：如果要避免在 Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替 pixels。1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。）
字体简写方式 font：
可以按如下顺序设置字体格式：font-style；font-variant；font-weight；font-size/line-height；font-family
如： font:italic bold 12px/20px arial,sans-serif;
## CSS链接属性
链接的四种状态：
a:link - 普通的、未被访问的链接 a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方 a:active - 链接被点击的时刻
为链接的不同状态设置样式时，请按照以下次序规则：
a:hover 必须位于 a:link 和 a:visited 之后；a:active 必须位于 a:hover 之后

css列表：

CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。
要修改用于列表项的标志类型，可以使用属性 list-style-type：
ul {list-style-type : square} 以方形的形式显示
ul.circle {list-style-type:circle;} 以圆圈的形式显示
ol.upper-roman {list-style-type:upper-roman;} 大写罗马
ol.lower-alpha {list-style-type:lower-alpha;} 小写英文

CSS表格：

CSS 表格属性可以帮助您极大地改善表格的外观。
表格边框：如需在 CSS 中设置表格边框，请使用 border 属性。
折叠边框：border-collapse；表格宽度高度：width/height；表格文本对齐：text-align/vertical-align；

CSS背景：

background-color

CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值可以为所有元素设置背景颜色，包括body与em、a等行内元素

background-repeat

 如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。

属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。（div background-repeat:no-repeat/repeat-x/repeat-y）

background-position

background-position 属性设置背景图像的起始位置。
这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。
div {background-position:right bottom;
背景关键字：
图像放置关键字最容易理解，其作用如其名称所表明的。例如，top right 使图像放置在元素内边距区的右上角。根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对应垂直方向。如果只出现一个关键字，则认为另一个关键字是 center。
背景关联：
如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。
可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响
background-attachment:fixed;

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>box</title>
	<link rel="stylesheet" href="demo5.css">
</head>
<body>
	<div id="div1">
	div1
	</div>
	<div id="div2">
	<input type="text">
	</div>
	<div class="1"></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>demo7</title>
	<link rel="stylesheet" href="demo7.css">
</head>
<body>
	<div class="wp">
			<ul class="img">
			<li><input checked id="1" type="radio" name="banner"><img src="../makeruhead/img/TB18o6AMXXXXXahXVXX6o7KSVXX-730-300.jpg" alt=""></li>
			<li><input id="2" type="radio" name="banner"><img src="../makeruhead/img/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg" alt=""></li>
			<li><input id="3" type="radio" name="banner"><img src="../makeruhead/img/TB1srspLFXXXXbJXVXX6o7KSVXX-730-300.jpg" alt=""></li>
			<li><input id="4" type="radio" name="banner"><img src="../makeruhead/img/TB1JzkjLXXXXXaCaXXX6o7KSVXX-730-300.jpg" alt=""></li>
		</ul>
		<div class="choose">
			<ul>
			<li><label for="1"></label></li>
			<li><label for="2"></label></li>
			<li><label for="3"></label></li>
			<li><label for="4"></label></li>
		</ul>
		</div>
	</div>	
	<div class="test">
		<input type="radio" name="1222">
	</div>
</body>
</html>

怪弹幕

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS中的样式属性

文本属性CSS 文本属性可定义文本的外观。通过文本属性，可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。color：设置文本颜色color_name 规定颜色值为颜色名称的颜色（比如 red。hex_number 规定颜色值为十六进制值的颜色（比如 #ff0000。rgb_number 规定颜色值为 rgb 代码的颜色（比如 rgb(255,0,0)。行间距...
复制链接

扫一扫

专栏目录