CSS入门（css简介与样式汇总CSS的使用方式CSS样式表的特征CSS基础选择器和复杂选择器边框阴影）

Posted 2020-11-23 mdzzz

一、CSS的作用
　　1、以统一的方式实现样式的定义
　　2、提高页面样式的可重用性和可维护性
　　3、实现了内容（html）和表示（CSS）的分离
　　HTML和CSS之间有什么关系？
　　　　HTML：构建网页的结构
　　　　CSS ：构建HTML元素的样式

　　样式汇总：
　　　　color：red 字体颜色
　　　　font-size:字体大小
　　　　font-family:字体样式
　　　　background-color 背景颜色
　　　　width:宽度
　　　　height:高度

　　字体使用实例（样式）

　　　　font-family:字体的种类

　　　　font-size:字号

　　　　color:字体的颜色

　　　　font-weight:字体的粗细

二、CSS的使用

　　1.内联样式

　　　　将样式声明在元素的style属性中

　　　　<p style="color;red（样式声明）">1</p>

　　　　样式声明 表示一个具体的显示效果，可以多个同时存在的，多个样式之间用 ； 进行隔开

　　　　每个样式声明都有两部分组成

　　　　　　color:样式属性

　　　　　　red:属性值

　　2.内部样式表

　　　　1.在head里面加上一个  style标签

　　　　2.在style中添加任意多的样式

　　　　　　p{样式声明；}

　　　　　　选择器：规范了页面中哪些元素能够使用定义好的样式

 

　　3.外部样式表

　　　　1.创建一个单独的样式表文件保存样式规则

　　　　　　在css文件夹下新建一个CSS文件  并在里面添加好样式

　　　　2.在需要使用得页面上添加 link 标签 进行引入

　　4.引入方式的优先级

　　　　就近原则  谁离这个标签近 最后就是谁的样式

 

三、CSS样式表的特征

　　1.继承性

　　　　子级标签可以直接使用父级元素声明好的样式 （大部分的CSS样式是可以被继承）

　　2.层叠性

　　　　可以同时写多个样式

　　3.优先级

　　　　低：  浏览器的缺省值

　　　　中：  就近原则

　　　　高：  内联样式

　　4.！improtant规则

　　　　作用： 强制调整优先级  （一定是最后显示的）

　　　　打破了优先级规则

 

四、CSS基础选择器

　　作用： 规范了页面中哪些元素能够使用定义好的样式

　　目的： 匹配页面元素（找到页面的元素）

　　　　1.通用选择器

　　　　　　作用：匹配页面中的所有元素

　　　　　　用法：*{}

 

　　　　2.标签选择器

　　　　　　作用：匹配当前所有这一类的标签

　　　　　　用法 p{}

 

　　　　3.类选择器

　　　　　　作用：由css定义好，可以被任意标记的class属性值进行引用的选择器

　　　　　　语法：

　　　　　　　　　　1.在标签内 加上class属性

　　　　　　　　　　2.在样式表中  .类名{} 进行引入

　　　　　　注意： 类名或者ID名  不能以数字开头

　　　　　　除了 _  -以外不能有其他的特殊字符

 

　　　　4.ID选择器

　　　　　　作用：针对指定ID值的元素去定义样式

　　　　　　语法：

　　　　　　　　1.在标签内加上ID属性

　　　　　　　　2.在样式表中 使用 #ID名{}  进行引入

　　　　5.基础选择器优先级

　　　1.最高优先级是 (直接在标签中的设置样式，假设级别为1000)

　　　2.次优先级是（ID选择器 ,假设级别为100） #myDiv{color:Red;}

　　　3.其次优先级是（类选择器，假设级别为10）.divClass{color:Red;}

　　　4.最后优先级是 （标签选择器，假设级别是 1） div{color:Red;}

　　　5.那么后代选择器的优先级就可以计算了啊

　　　　　　　比如

　　　　　　　.divClass span { color:Red;} 优先级别就是：10+1=11

　　　　　 总结：优先级：  id > class >  p（标签）> *

　　　　　　权值;

　　　　　　标签选择器       0,0,0,1

　　　　　　类选择器          0,0,1,0

　　　　　　id选择器           0,1,0,0

　　　　　　内联样式          1,0,0,0

　　　　　　选择器的权值加到一起，大的优先；如果权值相同，后定义的优先

 

五、复杂的选择器

　　1.群组选择器

　　　　作用：选择器声明式以 ， 分割 的选择器列表

　　2.后代选择器

　　　　后代： 只要是具备层级关系的元素 

　　　　使用空格 隔开

　　3.子代选择器

　　　　子代：只具备一级层级的关系的元素  

　　　　使用  > 隔开

 

六、尺寸属性

　　1、作用：用户设置元素的宽度和高度 单位为px  百分比

　　2.宽度属性和高度属性

　　　　width  height  设置元素的宽高

　　　　max-width max-height  最大的宽度  和 最大的高度

　　　　min-width min-height  最小的宽度  和 最小的高度

　　3.允许被修改高度和宽度的元素

　　　　1.块级元素允许被设置宽高

　　　　2.行内块大部分允许被设置宽高的 例如 表单控件  单选和复选 是不能修改尺寸

　　　　3.存在width和height属性的元素 可以设置宽高的样式 img table

　　4.溢出

　　　　使用尺寸属性限制元素大小的时候，如果内容所需要的空间太小大于元素本身，会导致溢出效果

　　　　属性：

　　　　overflow：规定当内容溢出元素框时发生的事情。

　　　　相应值:

　　　　　　visible:默认的效果  溢出可见

　　　　　　hidden:隐藏  溢出的时候隐藏

　　　　　　scroll:滚动  当元素溢出的时候会出现滚动条  溢出时滚动条可用

　　　　　　auto:自动  内容溢出的时候会出现但是没有溢出的时候不出现

 

七、边框阴影

　　定义：box-shadow是css3新增的一个属性。在W3School里，定义box-shadow是向框添加一个或者多个阴影的属性。 

　　语法：box-shadow: h-shadow v-shadow blur spread color inset.  

　　 　　h-shadow: 阴影的水平位置 

　　 　　v-shadow：阴影的垂直位置 

　　blur：阴影的模糊半径 

　　spread：阴影的半径 

　　color：阴影的颜色 

　　inset：将外部阴影改成内部阴影【outset反过来】 

　　根据box-shadow的定义，我们可以为一个框设置一个阴影，也可以设置多个阴影。

 

　　当我们需要设置多个阴影时，中间需要将每个阴影用逗号隔开。

 

　　1. h-shadow【必需】

　　这个值代表的是阴影在x轴上的阴影位置。可以是负值。

 

　　当它为正值的时候表示向右位移一定的距离【出现在元素的右边】，负值表示向左位移【出现在元素的左边】。这个距离的单位可以是px、em或者rem；

 

　　需要注意的是：h-shadow是必需的，不能省略！

 

　　2. v-shadow【必需】

　　这个值表示阴影在y轴上的位置。也可以是负值。

 

　　当值为负的时候表示向上偏移一定的距离【出现在元素的上方】；值为正的时候表示向下偏移一定的距离【出现的元素的下方】

 

　　3. blur【可选】

　　blur指的是阴影的模糊半径。这个值使得阴影部分的过渡看起来更柔和。我们可以试一试不同blur值对阴影效果的影响：

 

　　随着模糊半径数值的增大，阴影的模糊程度越高。

 

　　4. spread【可选】

 

　　spread表示的是阴影的半径。我在网上看到有人对spread和blur的区别发出疑问，其实很简单：blur用于描述模糊半径，它的值决定了阴影的模糊程度；而spread是表示阴影所占区域的大小，这是两个不同的概念。

 

 

 

　　5. color【可选】

 

　　阴影的颜色可以用任何颜色单位来表示。当我们没有设置color值的时候，默认就是黑色。

 

　　6. inset 【可选】

 

　　默认情况下，我们设置的阴影都是外部阴影，而这个属性值的作用是将外部阴影转换成内部阴影。

　　box-shadow: 10px 10px 10px 5px blue; /*默认为外部阴影*/ 

　　box-shadow: 10px 10px 10px 5px blue inset;/*将外部阴影切换为内部阴影*/