欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

荐 CSS&CSS3

程序员文章站 2022-03-11 16:07:01
该内容将持续更新，会出现覆盖情况，直到更新完成所以，前面的一些内容也会得到一些补充1. 引入CSS样式行内样式表(内联样式表)内部样式表(内嵌样式表)外部样式表(外链式样式表)CSS.demo1 
该内容将持续更新，会出现覆盖情况，直到更新完成
所以，前面的一些内容也会得到一些补充

1. 引入CSS样式

  • 行内样式表(内联样式表)
  • 内部样式表(内嵌样式表)
  • 外部样式表(外链式样式表)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS.demo1</title>
		<link rel="stylesheet" href="../CSS/demo1.css" type="text/css" /> <!--先加载CSS后HTML（链接外部样式）-->
		
		<!-- <style type="text/css">
			
		</style> -->
		
		<!-- <style type="text/css">
			先加载HTML后CSS,对页面性能有影响（导入外部样式）
			@import url("./CSS/demo1.css");
		</style> -->
		
	</head>
	<body>
		
		<!-- <p style=""></p> -->
		
	</body>
</html>
样式表 优点 缺点 作用范围
行内样式表 权重高 未实现样式和结构相分离 最用于一个标签
内部样式表 部分结构和样式相分离 没有彻底分离 最用于一个页面
外部样式表 完全实现结构和样式相分离 需要引入 作用于一个站点

2. 选择器

2.1 基础选择器

  • 标签选择器——选择某一类标签

  • 类选择器

    • 在标签中设置class属性

    • CSS文件中–> .class_name{}

    • 相同class可以使用多次

/* demo3.css */
html{
	font-size: 100px;
	font-weight: bold;
	letter-spacing: -15px;
}
.G{
	color: #4285f4;
}
.o1{
	color: #ea4335;
}
.o2{
	color: #fbbc05;
}
.g{
	color: #4285F4;
}
.l{
	color: #34a853;
}
.e{
	color: #ea4335;
}

<!-- demo3 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Google</title>
		<link href="../CSS/demo3.css" type="text/css" rel="stylesheet" />
		<link rel="icon" href="../img/study.png" />
	</head>
	<body>
		<span class="G">G</span>
		<span class="o1">o</span>
		<span class="o2">o</span>
		<span class="g">g</span>
		<span class="l">l</span>
		<span class="e">e</span>
	</body>
</html>

荐 CSS&CSS3

  • 多类名
/* demo3.css */
.font100{
	font-size: 100px;
	font-weight: bold;
	letter-spacing: -5px;
}
.G{
	color: #4285f4;
}
.o1{
	color: #ea4335;
}
.o2{
	color: #fbbc05;
}
.g{
	color: #4285F4;
}
.l{
	color: #34a853;
}
.e{
	color: #ea4335;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Google</title>
		<link href="../CSS/demo3.css" type="text/css" rel="stylesheet" />
		<link rel="icon" href="../img/study.png" />
	</head>
	<body>
		<span class="font100 G">G</span>
		<span class="font100 o1">o</span>
		<span class="font100 o2">o</span>
		<span class="font100 g">g</span>
		<span class="font100 l">l</span>
		<span class="font100 e">e</span>
	</body>
</html>

荐 CSS&CSS3

  • id选择器
    • 设置id
    • 使用 #id{}
  • 通配符选择器
    • 使用 *{}

2.2 复合选择器

  • 后代选择器
    • 父级 子级 …{}
    • 选择元素或元素组的子孙后代
  • 子元素选择器
    • 父级>子级{}
    • 只选择子级
  • 交集选择器
    • 既是又是
    • eg: p.hello{}（既是p标签又是hello类）
  • 并集选择器
    • eg: span,div{}（span和div标签）
  • 链接伪类选择器
    • a:link 未访问链接状态
    • a:visited 访问过的链接状态
    • a:hover 鼠标移动上去的链接状态
    • a:active 点击时的链接状态
    • 连接顺序 l,v,h,a(love hate) 顺序不对会出错

3. 字体样式

3.1 font字体

样式 说明 属性
font-size 字体大小 size
font-family 字体(可以多种字体) 字体英文名、unicode字体
font-weight 字体粗细 normal、bold、100-900(整百)
font-style 字体风格 normal、italic

综合语法: font: style weight size/line-height family

  • 字体大小和字体样式是不可以省略的，其它的可以省略

3.2 其它样式

属性 表示 属性值
color 颜色 color
line-height 行高 height
text-align 水平对齐 left、right、center
text-indent 首行缩进(汉字一般是两个缩进) …(1em=1个字大小)
text-decoration 文本装饰 none、underline、overline、line-through

3.3 line-height使用

3.3.1 标线

  • 顶线
  • 底线
  • 中线
  • 基线

3.3.2 行高

  • 行高为基线与基线的距离
  • 行高=上距离+文字高度+下距离(上距离=下距离)
  • 默认行高=font-size+4px

3.3.3 单行文本的垂直居中

  • 使行高=高度(设置行高可以理解为设置上距离和下距离)
  • 行高>高度 --> 文字偏下
  • 行高<高度 --> 文字偏上

4. 标签的显示模式

4.1 块级元素(block)

4.1.1 常见标签

  • <h1>~<h6>
  • <p>
  • <div>
  • <ul>
  • <ol>
  • <li>

4.1.2 特点

  • 块级元素独占一行
  • 高度、宽度、内外边距都可以设置
  • 宽度默认是父级容器100%
  • 里面可以放行内元素和块级元素
  • 注意
    • p不能放块级元素
    • h1~h6,dt都是文字块级标签，里面不能放其它块级元素

4.2 行内元素(inline)

4.2.1 常见标签

  • <a>
  • <strong>
  • <b>
  • <em>
  • <i>
  • <del>
  • <s>
  • <ins>
  • <u>
  • <span>

4.2.2 特点

  • 一行可以放多个行内元素
  • 高宽不能直接设置
  • 默认宽度是本身内容的宽度
  • 行内元素只能容纳文本或其他行内元素
  • 注意
    • 链接里面不能放链接
    • 特殊情况下，链接可以放块级元素，但是链接转换成块级更安全

4.3 行内块元素(inline-block)

4.3.1 常见标签

  • <img/>
  • <input/>
  • <td>

4.3.2 特点

  • 一行可以放多个行内块元素，但是之间会有空白间隙
  • 高度、宽度、内外边距都可以设置
  • 默认宽度是本身内容的宽度

4.4 模式转换

  • 转换为块级元素 display:block
  • 转换为行内元素 display:inline
  • 转换为行内块元素 display:inline-block

5. 背景

属性 描述 属性值
background-color 背景颜色 transparent、color
background-image 背景图片(背景图片在背景颜色之上) url(url)
background-repeat 背景平铺 repeat(默认)、no-repeat、repeat-x、repeat-y
background-position 背景位置 length||length(x坐标、y坐标)、position||position(top、center、bottom、left、center、right)
background-attachment 背景附着(相对于滚动条来说，如果是滚动，随滚动条移动；如果是固定，不随滚动条移动) scroll、fixed
background:rgba(r,g,b,a) 背景透明，不会影响内容 0<=a<=1(支持.4=0.4的写法)
  • background-position注意
    • 必须先指定background-image
    • 如果指定两个方位词，与顺序无关
    • 如果指定两个数值，前一个数值为x轴，后一个为y轴
    • 如果数值和方位值混用，前一个为x轴，后一个为y轴
    • 如果只指定一个方位词，另一个默认居中
    • 如果指定一个数值，该数值为x轴，另一个默认居中
  • 简写: background:顺序不严格要求(一般是 color url repeat attachment position)
  • rgba()在IE9以下不支持

6. CSS三大特性

6.1 层叠性

  • 多种CSS样式的叠加
  • 就近原则
  • 样式不冲突不层叠

6.2 继承性

  • 子标签可以继承父标签的样式
  • text-，font-,line-开头是可以继承，文字样式color可以继承

6.3 优先级

6.3.1 权重计算

  • 选择器相同，执行重叠性，就近原则

  • 选择器不同，要计算权重(如果权重相同，就近原则)

    选择器(一个元素) 权重
    * 0,0,0,0
    标签选择器，伪元素 0,0,0,1
    类选择器,伪类,属性选择器 0,0,1,0
    id选择器 0,1,0,0
    行内样式 1,0,0,0
    !important 无穷大

6.3.2 权重叠加

  • 使用交集选择器和后代选择器等要利用权重叠加

6.3.3 权重其它问题

  • 权重之间没有进位的

  • 对于子代标签，对于一个CSS样式，如果没有选中子标签的，按照父标签的权重来计算；如果有选中子标签的，不管父类权重多大，看选中该标签的选择器的权重

    | 0,0,0,0 |
    | 标签选择器，伪元素 | 0,0,0,1 |
    | 类选择器,伪类,属性选择器 | 0,0,1,0 |
    | id选择器 | 0,1,0,0 |
    | 行内样式 | 1,0,0,0 |
    | !important | 无穷大 |

6.3.2 权重叠加

  • 使用交集选择器和后代选择器等要利用权重叠加

6.3.3 权重其它问题

  • 权重之间没有进位的
  • 对于子代标签，对于一个CSS样式，如果没有选中子标签的，按照父标签的权重来计算；如果有选中子标签的，不管父类权重多大，看选中该标签的选择器的权重

本文地址：https://blog.csdn.net/weixin_46005735/article/details/107326446

上一篇： Tomcat：第二章：Tomcat日志文件分析

下一篇： Vue实现前端页面缓存、分页记忆、性能最大化之终结篇！

推荐阅读