前端 css基础
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标签作为选择器的名称
根据标签来选择标签， 以标签开头 ，这种选择器影响范围大，一般用来做一些通用的设置
charset = "UTF-8" >
name = "viewport" content = "width=device-width, initial-scale=1.0" >
style = "在这里写css代码" >
charset = "UTF-8" >
http-equiv = "X-UA-Compatible" content = "IE=edge" >
name = "viewport" content = "width=device-width, initial-scale=1.0" >
rel = "stylesheet" href = "index.css" >
5.2.类选择器
使用自定义的名称，以 . 号作为前缀，然后再通过HTML标签的class属性调用类选择器
5.3.层级选择器(后代选择器)
我是div标签
class = "name" > 我是div标签
class = "name" > 我是div标签
class = "sex" > 我是div标签
lang = "en" >
charset = "UTF-8" >
name = "viewport" content = "width=device-width, initial-scale=1.0" >
哈哈哈
class = "box1" > 嘿嘿嘿
5.4.id选择器
根据id选择标签， 以#开头 ，元素的id名称不能重复，所有id选择器只能对应于页面上一个元素，不能复
用，所以不推荐使用id作为选择器。
5.5.组选择器
根据组合的选择器选择不同的标签， 以,分割 ，如果有公共的样式设置，可以使用组选择器
大家好，我叫灰太狼
同学们好
lang = "en" >
charset = "UTF-8" >
name = "viewport" content = "width=device-width, initial-scale=1.0" >
id = "myid" > 我是一个div
id = "myid" > 我是一个新的div
lang = "en" >
charset = "UTF-8" >
name = "viewport" content = "width=device-width, initial-scale=1.0" >
class = "box1" >
class = "box2" >
class = "box3" >
lang = "en" >
charset = "UTF-8" >
http-equiv = "X-UA-Compatible" content = "IE=edge" >
name = "viewport" content = "width=device-width, initial-scale=1.0" >
id = "name" > 我是div标签
div {
color: #f7f2f2;
background-color: red;
}
lang = "en" >
charset = "UTF-8" >
name = "viewport" content = "width=device-width, initial-scale=1.0" >
class = "box1" >
class = "box2" > xxxxxxxxxxxx输入自己想要的内容
属性
含义 单位
width 宽度
height 高度
border 设置边框
padding 内边距
margin 外边距
border-radius 设置边框四个角