1.什么是css 是一组样式设置的规则，用于控制页面的外观样式 2.为什么使用css 1. 实现内容与样式的分离，便于团队开发 2. 样式复用，便于网站的后期维护 3. 页面的精确控制，让页面更精美 3.css作用 1. 页面外观美化 2. 布局和定位 4.css应用方式 也称为CSS引用方式，有三种方式：内部样式、行内样式、外部样式 4.1.内部样式 在title标签下面建一个style标签 写css代码 优点：在同一个页面内部便于复用和维护。 缺点：在多个页面之间的可重用性不高。 4.2.行内样式 也称为嵌入样式，使用HTML标签的style属性定义 只对设置style属性的标签起作用 优点：方便、直观 缺点：缺乏可重用性 4.3.外部样式 使用单独的.css文件定义，然后在页面中使用link标签引入 优点：使得css样式与html页面分离，便于整个页面系统的规划和维护，可重用性高。 缺点：css代码由于分离到单独的css文件中，容易出现css代码过于集中，若维护不当则容易造成混乱 5.选择器 css选择器是用来选择标签的，选出来以后给标签加样式 5.1.标签选择器 也称为元素选择器，使用HTML标签作为选择器的名称 根据标签来选择标签， 以标签开头 ，这种选择器影响范围大，一般用来做一些通用的设置 <head> <!-- 网页采用utf-8的编码格式 --> <meta charset = "UTF-8" > <meta name = "viewport" content = "width=device-width, initial-scale=1.0" > <!-- 网页标题 --> <title> Document </title> <style> /* 直接写css代码 */ </style> </head> <div style = "在这里写css代码" ></div> <head> <!-- 网页采用utf-8的编码格式 --> <meta charset = "UTF-8" > <meta http-equiv = "X-UA-Compatible" content = "IE=edge" > <meta name = "viewport" content = "width=device-width, initial-scale=1.0" > <!-- 网页标题 --> <title> Document </title> <!-- 引入css文件 --> <link rel = "stylesheet" href = "index.css" > </head> 5.2.类选择器 使用自定义的名称，以 . 号作为前缀，然后再通过HTML标签的class属性调用类选择器 5.3.层级选择器(后代选择器) <style> div { color : red ; } </style> <body> <div> 我是div标签 </div> </body> <style> .name { color : red ; } .sex { color : orangered ; } </style> <body> <div class = "name" > 我是div标签 </div> <div class = "name" > 我是div标签 </div> <div class = "sex" > 我是div标签 </div> </body> <!DOCTYPE html> <html lang = "en" > <head> <meta charset = "UTF-8" > <meta name = "viewport" content = "width=device-width, initial-scale=1.0" > <title> Document </title> <style> /* 层级选择器，要有层级关系，根据层级关系获取子标签，给子标签添加样式 */ div div { color : red ; } div .box1 { color : aqua ; } /* div div p{ color: brown; } */ div p { color : brown ; } </style> </head> <body> <div> <div> 哈哈哈 </div> <div class = "box1" > 嘿嘿嘿 </div> <div> 5.4.id选择器 根据id选择标签， 以#开头 ，元素的id名称不能重复，所有id选择器只能对应于页面上一个元素，不能复 用，所以不推荐使用id作为选择器。 5.5.组选择器 根据组合的选择器选择不同的标签， 以,分割 ，如果有公共的样式设置，可以使用组选择器 <!-- 层级选择器不一定必须是父子关系，祖孙关系的子标签也可以找到 有后代关系都适用于这个层级选择 器 --> <p> 大家好，我叫灰太狼 </p> </div> </div> <div> 同学们好 </div> </body> </html> <!DOCTYPE html> <html lang = "en" > <head> <meta charset = "UTF-8" > <meta name = "viewport" content = "width=device-width, initial-scale=1.0" > <title> Document </title> <style> #myid { color : pink ; } </style> </head> <body> <div id = "myid" > 我是一个div </div> <!-- 注意点：虽然给其他标签设置id="box"也可以设置样式，但是不推荐这样做，因为id是唯一的，以后js通过id 只能获取一个唯一的标签对象。 --> <div id = "myid" > 我是一个新的div </div> </body> </html> <!DOCTYPE html> <html lang = "en" > <head> <meta charset = "UTF-8" > <meta name = "viewport" content = "width=device-width, initial-scale=1.0" > <title> Document </title> <style> /* 组选择器 多个选择器的组合，一般把相同的样式放到组选择器中 */ /* 将box1和box2和box3都设置为宽200px和高200px */ .box1 , .box2 , .box3 { width : 200px ; height : 200px ; } /* 后面的不会覆盖 会在前面的基础上增加样式 */ .box1 { background-color : red ; } 属性 作用 font-size 字体大小 font-weight 字体粗细 font-family 设置字体 6.css属性 6.1.字体属性 .box2 { background-color : pink ; } .box3 { background-color : blue ; } </style> </head> <body> <div class = "box1" ></div> <div class = "box2" ></div> <div class = "box3" ></div> </body> </html> <!DOCTYPE html> <html lang = "en" > <head> <!-- 网页采用utf-8的编码格式 --> <meta charset = "UTF-8" > <meta http-equiv = "X-UA-Compatible" content = "IE=edge" > <meta name = "viewport" content = "width=device-width, initial-scale=1.0" > <!-- 网页标题 --> <title> Document </title> <!-- 以内部样式为例 --> <style> #name { /* font-size 设置字体大小 */ font-size : 20px ; /* font-size 设置字体粗细 */ font-weight : 400 ; /* 设置字体 */ font-family : '仿宋' ; /* 设置文字水平对齐方式 */ text-align : center ; /* 设置文字的下划线 */ text-decoration : underline ; /* 文本颜色 */ color : blue ; /* 背景颜色 */ background-color : pink ; 属性 含义 说明 text-align 设置文字水平对齐方式 取值：left、center、right text-decoration 设置文字的下划线 underline 属性 含义 说明 color 文本颜色 background-color 背景颜色 属性 含义 说明 overflow 元素溢出 visible默认值，显示子标签溢出部分 hidden隐藏子标签溢出部分 auto如果子标签溢出，则可以滚动查看其余的内容 6.2.文本属性 6.3.颜色 6.4.CSS元素溢出 什么是CSS的元素溢出？ 当子元素（标签）的尺寸超过父元素（标签）的尺寸时，此时需要设置父元素显示溢出的子元素的方 式，设置的方式是通过overflow属性来完成的。 } </style> </head> <!-- body包裹的称为内容区域 --> <body> <div id = "name" > 我是div标签 </div> </body> </html> div { color: #f7f2f2; background-color: red; } <!DOCTYPE html> <html lang = "en" > <head> <meta charset = "UTF-8" > <meta name = "viewport" content = "width=device-width, initial-scale=1.0" > <title> Document </title> <style> .box1 { width : 100px ; height : 100px ; background-color : red ; 6.5.盒子模型 什么是盒子 网页其实就是一个一个盒子构成 overflow : auto ; } .box2 { width : 200px ; 宽度200 height : 50px ; 高度50 background-color : green ; } </style> </head> <body> <div class = "box1" > <div class = "box2" > xxxxxxxxxxxx输入自己想要的内容 </div> </div> </body> </html> 属性 含义 单位 width 宽度 height 高度 border 设置边框 padding 内边距 margin 外边距 border-radius 设置边框四个角
标签：color,标签,前端,基础,样式,div,选择器,css From： https://blog.csdn.net/qq_39218045/article/details/141687810