前端自学整理——CSS复习(一)

CSS复习一

为什么要引入CSS层叠样式表

  • 体现了结构与样式相分离的思想
  • HTML控制网页结构,CSS修饰网页的样式

火狐首页

CSS基本语法

  • 选择器{属性1:值1;属性2:值2;}
    示例:
.nav a {
	display: inline-block;
	height: 33px;
	background: url(images/to.png) no-repeat;
	padding-left: 15px;
	color: #fff;
	line-height: 33px;
	font-size: 14px;
}

CSS样式表引入的三种方式

  • 行内式
   <h1 style="color: pink; font-size: 18px;">行内式</h1>
  • 内联式
  <head><style></style></head>
  • 外联式
 <link rel="stylesheet" href="">

CSS选择器

  • 选择器:选出相应的元素,对它进行修饰
  • 使用步骤:选出相应元素+调用
选择器的分类
  • 基础选择器(单个选择器)
  • 标签选择器
  • 类选择器(在样式表中用.class调用,标签可调用多类名)
  • id选择器(在一个页面中id是唯一的,一个id只能使用一次
  • 通配符选择器*(对所有元素有效)*
  • 复合选择器
基础选择器作用特点用法
标签选择器选出所有相同的标签不能差异化选择p{color:black;}
类选择器选取某个或多个标签根据需要选择.header{color:blue;}
id选择器只能选择一个标签ID只能出现一次#header{color:blue;}
通配符选择器选择所有的标签特殊情况使用* {margin:0;}
  • 复合选择器
  • 后代选择器
  • 子代选择器(亲儿子选择器,只选择直接后代)
  • 并集选择器
  • 交集选择器
  • 链接伪类选择器
复合选择器作用特点用法
后代选择器选出所有的子孙后代子孙后代.nav a
子代选择器选取直接后代只能是直系子代.header>a
并集选择器遇到相同样式的集体声明集体声明.p .nav
交集选择器一般是符合相同的结构相同结构p.nav
链接伪类选择器一般用于链接和光标特殊情况使用a:hover

###CSS常用的文字属性(具体见思维导图)

需要说明的是:

  • text-align属性用于设置元素内文本内容(行内元素以及行内块元素水平对齐方式
  • 行高的组成:上下间距和文本高度
  • font字体综合写法:font{font-style font-weight font-size/line-height font-family},前面两个属性必不可少

CSS背景属性(具体见思维导图)

需要说明的是:

  • 背景半透明语法:rgba(0,0,0,alpha) alpha∈(0,1)
    在这里插入图片描述

CSS显示模式

  • 将元素分成不同的显示模式是为了更好的布局网页
块级元素
  • 常见元素: <div> <p> <h> <ul> <li>
  • 特点:
    • 独占一行
    • 可以设置高宽、内外边距
    • 宽度默认是父元素的100%
    • 可以视作一个容器,里面可以放其他元素
行内元素(内联元素)
  • 常见元素:<a> <strong> <u> <span>

  • 特点:

    • 一行显示多个
    • 无法直接设置高宽
    • 默认宽度是内容的宽度
    • 只能容纳文本和其他行内元素
    • 链接不可以嵌套
行内块元素
  • 常见元素:<img>
  • 特点:
    • 同时具有块级元素和行内元素的优势
    • 可以指定宽高
行高=(最近一级)盒子高度——>单行文字垂直居中

CSS三大特性(理解)

层叠性
  • 概念:所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉
  • 原则:
    • 样式冲突,遵循的原则是就近原则。 那个样式离着结构近,就执行那个样式。
    • 样式不冲突,不会层叠
继承性
  • 概念:子标签会继承父标签的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。简单的理解就是:子承父业。

  • 注意

    • 恰当地使用继承可以简化代码,降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式,可以给父级指定一个,这些孩子继承过来就好了。
    • 子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承,以及color属性
优先级

权重有一个计算公式:(不进位,左边的权重高)

标签选择器计算权重公式
继承或者 *0,0,0,0
每个元素(标签选择器)0,0,0,1
每个类,伪类0,0,1,0
每个ID0,1,0,0
每个行内样式 style=""1,0,0,0
每个!important 重要的∞ 无穷大

附思维导图:
CSS第一天复习
个人向整理总结,如有疏漏,尽情指正!

©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页