行内样式

行内样式直接定义再HTML标记之内，通过style属性来实现。这种方式比较容易接受，但是灵活性不强。

内嵌式

在页面中使用<style></style>标记将CSS样式包含在页面中。该方式没有行内标记表现的直接，但是能够使页面更加规整。与行内样式相比，内嵌式样式更加便于维护。

链接式

链接外部 CSS 样式表是最常见的一种引用样式表的方式，将CSS样式定义在一个单独的文件中，然后在HTML页面中通过<link>标记引用，是一种最为有效的使用CSS样式的方式。

<link rel="stylesheet" type="text/css" href="style.css">`
rel：定义外部文档和调用文档间的关系，stylesheet则是外部样式表。
href：CSS文档的绝对或相对路径。
type：指的是外部文件的类型。

CSS 样式的基本属性

背景属性

属性	描述
background-color:black	背景颜色
background-image : url(image/bg.gif)	背景图片
background-attachment : fixed	固定背景
background-repeat : no-repeat	不重复排列
background-position : 90% 90%	背景图片x与y轴上的起始位置

文本属性

属性	描述
color : #999999	文字颜色
font-family :STfangsong	文字字型
font-size: 10px	文字大小
font-style:italic	文字斜体
font-variant:small-caps	小字体
text-decoration:overline	加顶线
text-align:left	文字左对齐
line-height: 200%	设定行高
letter-spacing: 1px	文字间距
font-weight:bold	文字粗体
vertical-align:sub	下标字
vertical-align:super	上标字
text-transform: capitalize	元素中的字母，首字大写
text-transform : uppercase	英文大写
text-transform : lowercase	元素中的字母，英文小写
direction:ltr	文本方向从左到右（默认）
direction:rtl	文本方向，从右到左
text-indent: 10px;	缩进元素中文本的首行

<p><span style="vertical-align: super;">上标：™️</span>这是段落。</p>
<hr />
<p style="text-indent: 10px;">段落的首行缩进10px</p>

<style> 
   h1 {text-transform:uppercase}   /*文本中的*/
   h2 {text-transform:capitalize}  /*每个单词以大写字母开头*/
   p {text-transform:lowercase}    /*无大写字母，仅有小写字母*/
</style>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
        <!--实现 99乘法表 倒三角 靠右侧排列-->
		<p id="p1" style="letter-spacing: 1px;direction: rtl;"></p>
		<button onclick="func_1()">点击获取</button>
	</body>
</html>
<script>
	var a = "";
	var result;
	function func_1(){
		for (var i = 1;i<=9;i++) {
			for (var j = 1;j<=i;j++) {
				result = i*j;
				a += i+"*"+j+"="+result+" ";
				document.getElementById("p1").innerHTML = a;
			}
			a += "<br/>"  /* 内部循环一次后，换行*/
		}
	}
</script>

链接属性选择器

属性	描述
a:link	普通的、未被访问的链接
a:visited	用户已访问的链接
a:hover	鼠标指针位于链接的上方
a:active	链接被点击的时刻

轮廓突出元素的作用

属性	描述
outline	设置轮廓属性
outline-color	设置轮廓颜色
outline-style	设置轮廓样式
outline-width	设置轮廓宽度

<body>
	<p style="outline:green dashed thick;border:1px solid red;"> 
		标签定义水平线
	</p>
</body>

列表

可放置或改变列表标志，或者将图像作为列表标志。

属性	描述
list-style：none	去掉圆点

表格

属性	描述
border-collapse: collapse	折叠边框，相当于去除
padding	表格内边距

定位

属性	描述
position	把元素放在一个静态的、相对的、绝对的或固定的位置中
top、bottom	元素向上、下的偏移量
left、right	元素向左、右的偏移量
static	偏移属性没有效果
relative、absolute	相对位置、绝对位置
fixed	随页面滑动而滑动
overflow	设置元素溢出后的效果

posted on 2019-01-15 09:53 HevateArvin 阅读(235) 评论(0) 收藏举报

CSS 基础样式及基本属性