CSS

最新推荐文章于 2024-09-14 08:09:14 发布

weixin_45976057

最新推荐文章于 2024-09-14 08:09:14 发布

阅读量109

点赞数

分类专栏： CSS的作用、CSS的特征、CSS的选择器文章标签： css

本文链接：https://blog.csdn.net/weixin_45976057/article/details/103641370

版权

CSS的作用、CSS的特征、CSS的选择器专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

	样式汇总：
              color  字体颜色
          font-size  字体大小
        font-family  字体样式
   background-color  背景颜色
              width  宽度
             height  高度
字体使用实例（样式）:
	    font-family  字体的种类
	      font-size  字号
	          color  字体的颜色
	   字体的粗细：
	   font-weight：normal;
	                                  normal（普通）
	                                    bold（宽）
	                                 lighter（细）
	    font-weight:900;
	                            100-900数值也可以表达字体的粗细。
	            
	   字体的形状  font-style:italic;（倾斜）
	        行高  lin-height：
	     水平位置  text-align:center；（水平居中）
	     字符间距  etter-spacing:
	   字体的划线  text-decoration: 
	                             text-decoration: overline;上划线
	                             text-decoration: line-through;中划线   
	                             text-decoration: underline;下划线

二、CSS的使用

1.内联样式
	将样式声明在元素的style属性中
	<p style="color;red（样式声明）">1</p>
	         样式声明 表示一个具体的显示效果，可以多个同时存在的，多个样式之间用 ； 进行隔开
	         每个样式声明都有两部分组成
	color   样式属性
	  red   属性值
2.内部样式表
	1.在head里面加上一个  style标签
	            <style type="text/css">
	                    </style>
	2.在style中添加任意多的样式
			p{
				样式声明；
			}
	选择器：规范了页面中哪些元素能够使用定义好的样式
	
3.外部样式表
	1.创建一个单独的样式表文件保存样式规则
		    在css文件夹下新建一个CSS文件  并在里面添加好样式
	2.在需要使用得页面上添加 link 标签 进行引入
	      <link rel="stylesheet" type="text/css"href="    .css" />
	      
	       拓展:
	                在<link>标签中，“rel=stylesheet”，rel是关联的意思，关联的是一个样式表(stylesheet)文档，它表示这个link在文档初始化时将被使用。

                    rel是Relations的所写 指关联到一个stylesheet（样式表单)。

                    由于目前的CSS还不能抓取rel与rev的属性值，所以没有办法给不同关系的链接提供不同的样式，所以现在rel与rev只是用来使得网页的语义性更为完善。

              Link标签有两个作用：

                      1. 定义文档与外部资源的关系；2. 是链接样式表。

                 link标签是用于当前文档引用外部文档的，其次，这个标签的rel属性用于设置对象和链接目的间的关系。
	       
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名{}  进行引入
			
优先级：  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：
           
               h-shadow 	必需的（必选值）。水平阴影的位置。允许负值
               v-shadow 	必需的（必选值）。垂直阴影的位置。允许负值
                   blur 	  可选（可选可不选）。模糊距离
                 spread 	  可选（可选可不选）。阴影的大小（尺寸）
                  color 	  可选（可选可不选）。阴影的颜色
                  inset 	  可选（可选可不选）。从外层的阴影（开始时）改变阴影内侧阴影

 例：
                box-shadow:5px 7px 2px 3px red inset;
                box-shadow:5px 7px;
                box-shadow:5px 7px 2px;
                box-shadow:5px 7px 2px 3px red;
                这几种模式都可以运行出来，少了水平阴影的位置、垂直阴影的位置就没有任何效果了（就是运行不出来）。