CSS学习笔记

记录一下CSS学习笔记。

概念

层叠样式表：cascading Style Sheets,

层叠：多个样式可以作用在一个HTML元素上，同时生效

html与CSS结合方式

  • 内联样式

    在标签内使用style属性指定CSS代码；由键值对构成，中间用分号隔开；没有实现样式分离，不建议使用

  • 内部样式

    在head中定义style标签，style标签中的内容就是CSS代码，只能在当前页面生效

    1
    2
    3
    4
    5
    6
    <style>
    			div{<!-- 注意吃div不是标签-->
    				color: blue;
    			}
    			
    </style>

  • 外联样式

    将CSS代码抽取到外部文件中去

    • 1、定义CSS文件

    • 2、在head标签内定义link标签，引入外部CSS资源文件

      1
      <link rel="stylesheet" href="./CSS/a.css" />
      1
      2
      3
      div{
      	color: brown
      }

    • 或者也可以通过以下方式引入

      1
      2
      3
      <style>
      	@import url("CSS/a.css");	
      </style>

注意事项：三种方式作用范围越来越大

基本语法

  • 格式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    选择器1{
    	属性名：属性值；
    	属性名：属性值；
    	属性名：属性值；
    	···
    }
    选择器2{
    	属性名：属性值；
    	属性名：属性值；
    	属性名：属性值；
    	···
    }
    ···

    选择器：筛选具有相似特征的元素；每一对的属性需要使用分号隔开，最后一对属性可以不加分号

选择器种类

  • 基本选择器

    • id选择器：选择具体的ID属性值#id

    • 元素选择器：选择具有相同标签名称的元素，低于id要选择器

    • 类选择器：选择具有相同Class属性值的元素，语法.class属性值（），比元素选择器优先级高

      选择器优先级：id>类>元素

  • 拓展选择器

    • *选择所有元素；*{}

    • 并集选择器：选择多个只选择器选择器1，选择器2{}

    • 子选择器：选择器1 选择器2{}筛选选择器1下的选择器2

    • 父选择器：选择器1>选择器2{}筛选选择器2的父选择器1

    • 属性选择器：选择元素名称，属性名= 属性值的元素元素名称[属性名="属性值"]{}

    • 伪类选择器：选择一类元素具有的状态元素：状态{}

      以超链接为例

      • link：初始化的状态
      • visited：被访问过的状态
      • active：正在访问的状态
      • hover：鼠标悬浮状态
      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
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      74
      75
      76
      77
      <!DOCTYPE html>
      <html>
      	<head>
      		<meta charset="utf-8">
      		<title>测试CSS</title>
      		<!-- 测试内部样式 -->
      		<!-- <link rel="stylesheet" href="./CSS/a.css" /> -->
      		<style>
      			#div1{
      				color: blueviolet;
      				font-size: 30px;
      			}
      			div{
      				color: #7FFF00;
      			}
      			.cla{
      				color: fuchsia;
      			}
      			
      			
      			/* 子选择器 */
      			div p{
      				color: firebrick;
      			}
      			
      			/* 父选择器 */
      			div > p{
      				border: 0.0625rem solid;
      			}
      			
      			input[type="text"]{
      				border: 0.0625rem solid;
      			}
      			/* 伪选择器 */
      			a:link{
      				color: pink;
      			}
      			a:hover{
      				color: darkcyan;
      			}
      			a:visited{
      				color: black;
      			}
      			a:active{
      				color: blueviolet;
      			}
      			
      		</style>
      		
      		
      	</head>
      	<body>
      		<!-- <!-- 测试内联样式 
      		<div style="color: aqua;">hello CSS!</div> -->
      	
      		<div>Hello</div>
      		<p>呵呵</p>
      		
      		<div id="div1">DIV1测试</div><br />
      		<div>DIV2</div><br />

      		<p class="cla"> 测试</p><br />
      		
      		
      		<!-- 子选择器 -->
      		<div>
      			<p>锄禾日当午</p><br />
      			<p>汗滴禾下土</p><br />
      		</div>
      		
      		测试<input type="text" /><br /><br />
      		
      		<a href="https://www.baidu.com">百度</a>
      		
      		
      	</body>
      </html>

CSS属性

常用属性

  • 字体文本

    • font-size
    • color:文版颜色
    • test-align:对齐方式
    • line-heignt:行高

  • 背景

    • background：复合属性

  • 边框

    • border：设置边框，复合属性

  • 尺寸

    • width：宽
    • height：高

  • 盒子模型

    一个元素一个盒子

    • 外边距：margin
    • 内边距：padding ，默认情况下内边距会影响整个盒子的大小，可以设置属性让width和height不变box-sizing:border-box
    • float:浮动属性
      • left
      • right

例子

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* p{
				color: orangered;
				font-size: 1.875rem;
				text-align: center;
				line-height: 5;
				border-top: #FF4500 0.0625rem solid;
				border-left: orange 0.0625rem solid;
				border-right: black 0.0625rem solid;
				border-bottom: blue 0.0625rem solid;
				
			}
			div{
				border: #000000 solid;
				height: 1.875rem;
				width: 1.875rem;
			}
			body{
				border: #000000 solid;
				background: blanchedalmond center;
			} */


			div {
				border: 1px solid red;
			}

			.div1 {
				width: 200px;
				height: 200px;
				padding: 50px;
				box-sizing: border-box;
			}

			.div2 {
				width: 100PX;
				height: 100px;
				/* margin: 3.125rem; */
			}

			.div3 {
				float: left;
			}

			.div4 {
				float: left;
			}

			.div5 {
				float: left;
			}
		</style>
	</head>
	<body>
		<!-- <p>测试</p>
		<div>
			
		</div> -->

		<div class="div1">
			<div class="div2">

			</div>
		</div>
		<br />
		<div class="div3">aaa</div>
		<div class="div4">bbb</div>
		<div class="div5">ccc</div>

	</body>
</html>