CSS简单笔记

发表于 2019-10-01 更新于 2019-10-24 分类于笔记，前端， CSS 阅读次数： Waline：本文字数： 1.8k 阅读时长 ≈ 2 分钟

css Cascading Style Sheet 层叠样式表

系列链接

HTML简单笔记

 CSS简单笔记

 JavaScript简单笔记

 jQuery简单笔记

 拓展简单笔记

一基本语法

<html>
	<head>
		<style type="text/css">
			选择器名{
				样式属性:样式数值;
				样式属性:样式数值;
				样式属性:样式数值;
			}
		</style>
	</head>
</html>
<!--code0-->

- ```css
  .类名{
  	样式属性:样式数值;
  	样式属性:样式数值;
  	样式属性:样式数值;
  } 
  <!--code1-->

  - 标签里写`id="ID"`

引用方式

<!-- 内部样式 -->
<head>
		<style type="text/css">
			选择器名{
				样式属性:样式数值;
				样式属性:样式数值;
				样式属性:样式数值;
			}
		</style>
</head><!-- 只能当前页面使用 -->
<!--code2-->

<!-- 行内样式 -->
<span style="font-size:25px;color:pink;">爱</span>
<!--code3-->

后代选择器

<!-- 层次关系 --><!-- 还可以和交集选择器用 -->
选择器1 选择器2{

}
列子:
p .red{
color:red
}
<p>我<span class="red">爱</span>你</p>

并集选择器

选择器1,选择器2,选择器3{

}
<!--code5-->

伪类名称	含义	示例
`a:link`	未单击访问时超链接样式	`a:link{color:#9ef5f9;}`
`a:visited`	单击访问后超链接样式	`a:visited{color:#333;}`
`a:hover`	鼠标悬浮其上的超链接样式	`a:hover{color:#ff7300;}`
`a:active`	鼠标单击未释放的超链接样式	`a:active{color:#999;}`

设置伪类的顺序：a:link->a:visited->a:hover->a:active
一般和超链接标签配合使用

背景样式
- background-color
- background-image:url(路径)
- background-repeat:图片平铺方式 no-repeat repeat-x repeat-y 默认:repeat
- background-position:设置图片偏远 50px 100px 50% 100% left bottom center center right top等等
- background: 颜色图片 position repeat

列表样式

list-style-type

值	说明	语法示例
`none`	无标记符号(可做导航栏; 可横排间隔)	`list-style-type:none;`
`disc`	实心圆，默认类型	`list-style-type:disc;`
`circle`	空心圆	`list-style-type:circle;`
`square`	实心正方形	`list-style-type:square;`
`decimal`	数字	`list-style-type:decimal;`

list-style-image

li{
	list-style-image: url(image/arrow-right. gif); 
	list-style-type: circle;
}

list-style-position : inside outside

五结合`<div>`

用法 :
- 网页布局
- 排版网页内容

语法例子:

#header {
	width:200px;
	height:280px;
}

<div id="header"> 网页内容 </div>

可加属性
- border:1px red solid;

系列链接

一 基本语法

五 结合<div>

一基本语法

五结合`<div>`