Web前端CSS知识梳理01

最新推荐文章于 2024-07-26 08:00:00 发布

asdrtgvxhus

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量144

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/asdrtgvxhus/article/details/106402828

版权

1. Css简介

在这里插入图片描述

2. Css常用文本属性

css代码组成
标签选择器标签名{
                                   属性名:属性值;
                                   属性名:属性值; …
                    }
字体颜色设置的三种方法
1、用单词表示

  h1{color: red}

2、用十进制方式表示
所有的颜色都是由红绿蓝三基色通过比例的不同组合而成.每个颜色的取值范围是0-255之间

  h1{color: rgb(255,254,0); }

3、十六进制表示颜色

  h1{color:#009F7F;} 
  /* 十六进制简写 */
  h2{color:#ff4400;}
  h2{color:#f40;}

其它属性

 	/* 字号 单位px,chrome默认字号是16px */
 	     font-size: 60px;
 	/* 字体 chrome默认是微软雅黑 */
 	     font-family: "宋体";
 	/* 文本水平居中  left(默认值)/center/right */
 	     text-align: center;
 	/* 正常400 normal  加粗 700 bold   没有单位*/
 	     font-weight: 700;
 	/* 首行缩进 单位可以是px,也可以是em；
 	   1em = 当前一个字号的大小*/
 	     text-indent: 2em;

3. Chrome浏览器的调试

在显示效果右击检查(或快捷键ctrl+shift+i / f12)

4. (html-div)盒子基本三属性

  div{
		/* 宽度 */
		width:200px;
		/* 高度 */
		height: 200px;
		/* 背景色 */
		background: yellowgreen;
  }

在这里插入图片描述

5. 显示模式

块级显示模式

自己单独占一行,设置宽高起作用,在不设置宽度的情况下,和父元素的宽度一样; 没设置高度情况下，高度由内容撑开
块元素: div form h1-h6 hr p ul ol li dl dt dd

行内(内联)显示模式

一行可以有多个,设置宽高不起作用,宽高靠内容撑开
行内元素: span a b strong i em u ins s del

行内块显示模式

一行可以有多个,设置宽高起作用
行内块元素: img 表单元素
注意：
行内元素和行内块元素由于代码换行会出现一个水平间距
在浏览器里显示是行内元素但是表现出来的部分特征是块元素的,它不属于3种模式中

 html标签
  <div></div>
  <div></div>
  <b>加粗</b>
  <b>加粗</b>
  <b></b>
  <i>倾斜</i>
  <img src="ling.jpg" width="50">
  <img src="gdt.jpg" width="50">

css属性
  div{
      width: 100px;
      height: 100px;
      background: yellowgreen;
  }
  b{
      background: pink;
      width: 10000px;
      height: 10000px;
      font-size: 60px;
  }
  i{
      background: pink;
  }

在这里插入图片描述

6. 显示模式转换

		/* 将其他模式转换成行内块显示模式 */
		display: inline-block;
		/* 将其他模式转换成块级显示模式 */
		display: block;
		/* 将其他模式转换成行内显示模式 */
		display: inline;
		/* 将此元素隐藏*/
		display: none;

7. 选择器

标签选择器

标签选择器: 标签名{属性名:属性值;…}

   b {
		width: 100px;
		height: 100px;
		background: pink;
   }

类选择器

类选择器:
	定义类名称: 以点开头+类名称{属性名:属性值;.........}
	调用类名称: 用标签的class属性等于类名称
	命名规范: 不能用数字开头,可以是字母+数字+下划线+中划线
	建议用驼峰命名法: 名字用多个单词组合而成,第一个单词的首字
	母小写,从第二个单词开始,首字母大写

.yellowGreenStudent{
				color:yellowgreen;
}

<h3 class="yellowGreenStudent">标题3</h3>

Id选择器

定义id名称: 以#开头+id名称,命名规范和类名一样
调用id:标签的id属性等于id名称
类选择器相当于是人的名字,可以重复使用,id名称相当于是人的身份证,身份证是唯一的.

   #one{
		 width: 100px;
	     height: 100px;
		 background: yellowgreen;
   }

后代选择器

基础选择器: 之前学习的标签选择器,类选择器,id选择器
复合选择器: 将之前的基础选择器结合使用
后代选择器: 用祖先选择器空格后代选择器

权重: 继承 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
	   0       1           10        100       1000       无穷大

8. 进制

在这里插入图片描述

9. 多类名调用

代码冗余: 在程序世界,当一个代码片段,重复出现多次,此时会影响执行的效率,叫做代码冗余
多类名调用: 标签可以调用多个类名,类名之间用空格隔开

   .font150{
             font-size: 150px;
             font-weight: 700;
             font-family: "黑体";
   }
   .blue {
             color: #1B6FEF;
   }

<span class="blue font150">g</span>

10. Css三种书写位置

内嵌式

此方式将html代码和css代码相对分离,耦合度相对较低,在工作项目中偶尔使用

	 <style type="text/css">
	 	div{
			color:red;
		}
	 </style>

行内式

此方式将html代码和css代码掺杂在一起,耦合度极高,难以修改和维护,在工作项目中,偶尔使用

<div style="color: red; font-size: 40px;">盒子</div>
<div style="color: red; font-size: 40px;">盒子</div>
<div style="color: red; font-size: 40px;">盒子</div>

外链式

将css代码单独写在css文件中,代码绝对分离,耦合度极低,便于维护和修改,在工作项目中经常使用

 <link rel="stylesheet" type="text/css" href="one.css"/>

11. Css层叠性

css层叠性: 不同的属性都能实现,当权重相同时,相同属性后定义的会层叠先定义的,当权重不同时,相同属性谁的权重高实现谁的

权重: 继承 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
	   0       1           10        100       1000       无穷大

在这里插入图片描述
补充：

1. 线属性: underline 下划线
           overline  顶划线
		   line-through 中划线
           none 去掉下划线
        text-decoration:none;

2. 块元素的默认宽度: 块元素在不设置固定宽度的情况下,宽度和
   父元素一样,除非自身设置固定宽度

在这里插入图片描述

3. text-align:center 能让什么居中: 
   能让元素中的文本,行内元素,行内块元素水平居中
   如果希望文本,行内元素,行内块元素水平居中,要给父元素
   设置text-align:center

在这里插入图片描述

4. 权重
继承 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
 0         1          10       100       1000       无穷大

权重值: 元素通过父辈提高的权重值,不能超过自身高于当前级别的选择器的权重值

12. Css继承性

标签可以继承父辈元素关于设置文本的属性,优先继承离标签最近的父辈元素,继承的权重值是0
在这里插入图片描述
h标签和a标签的继承
标签在初始状态下会自带一些默认样式
h系列不能继承文字大小,a标签不能继承文字的颜色

13. 伪类

伪类的四种状态,伪类的权重值是10,当四种状态同时存在时按照lvha顺序,出于隐私的考虑,visited只支持颜色的变换

       /* 未访问状态 */
		a:link{
			color:red;
			font-size: 20px;
		}
		/* 访问后的状态 */
		a:visited{
			color:yellowgreen;
			font-size: 100px;
		}
		/* 鼠标移入状态 */
		a:hover{
			color:yellow;
			font-size: 80px;
		}
		/* 鼠标按下 */
		a:active{
			color: blue;
			font-size: 30px;
		}