CSS简单笔记

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

css Cascading Style Sheet 层叠样式表

系列链接

HTML简单笔记

 CSS简单笔记

 JavaScript简单笔记

 jQuery简单笔记

 拓展简单笔记

一基本语法

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

选择器

标签{
    样式属性:样式数值;
    样式属性:样式数值;
    样式属性:样式数值;
}
1
2
3
4
5
6
7

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


- 标签里写 `class="类名"`

#ID{
    样式属性:样式数值;
    样式属性:样式数值;
    样式属性:样式数值;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

3. 引用方式

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

<!-- 外部样式 -->
单独定义在一个.css文件中
<link href="" type="text/css" rel="stylesheet"/>
1
2
3
4

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


如:

我<span style="font-size:25px;color:pink;">爱</span>你

优先级:
1. 就近原则
2. ID选择器>类选择器>标签选择器

二高级应用

复合选择器

交集选择器

1
2
3

<!-- 同时满足两个条件 -->
标签名.类名
标签名#ID

后代选择器

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

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

并集选择器

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

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

2. 继承特性 : 內层标签应用外层标签样式

## 三 美化网页

 1. 字体样式

    - |    属性名     |                             含义                             |              举例               |
      | :-----------: | :----------------------------------------------------------: | :-----------------------------: |
      | `font-family` |                         设置字体类型                         |  `font-family:"隶书","黑体";`   |
      |  `font-size`  |         设置字体大小(`in` `cm` `mm` `pt` `pc` `px`)          |        `font-size:12px;`        |
      | `font-style`  |          设置字体风格(`normal` `italic`  `oblique`)          |       `font-style:italic`       |
      | `font-weight` | 设置字体粗细(`normal` `bold` `bolder` `lighter ` `1-9百`)` |    `font-weight:bold;italic` |                                 |
      |    `font`     |     在一个声明中设置所有字体属性(风格->粗细->大小->类型)     | `font:itallc bold 36px "宋体";` |

2. 文本样式

   - |      属性名       |                             含义                             |             举例             |
     | :---------------: | :----------------------------------------------------------: | :--------------------------: |
     |      `color`      |          设置文本颜色(颜色单词 #值两两同可缩为一位)          |        `color:#00c;`         |
     |   `text-allgn`    |   设置元素水平对齐方式(`left` `right` `center`  `justify`)   |     `text-allgn:right;`      |
     |   `text-indent`   |                      设置首行文本的缩进                      |     `text-indent:20px;`      |
     |   `line-height`   |                        设置文本的行高                        |     `line-height:25px;`      |
     | `text-decoration` | 设置文本的装饰(`none` `underline` `overline` `line-through` `blink`) | `text-decoration:underline;` |
     | `vertical-align`  |       垂直对齐(`middle` `top` `bottom`)(图片旁的文字)        |   `vertical-align;middle;`   |

3. 伪类

   1. 语法

      ```css
      标签名:伪类名{声明;}
      如
      a:hover{
      	color:#B46210;
      	text-decoration:underline;
      }

伪类名称	含义	示例
`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>`