CSS教程

部分CSS基础

本文主要是介绍部分CSS基础，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

css 的概念

层叠样式表 (Cascading Style Sheets，三个单词字头缩写为 CSS），他是专门用于修饰页面样式的。 比如，可以更改内容的字体、颜色、⼤小以及间距，或是将其分列，或是添加动画等。

  • html:超文本标记语⾔言，⽹页的结构搭建，⻚面布局
  • css:层叠样式表,⽹页的修饰，样式的渲染
  • javascript:解释型的编程语言，用于与⻚面的交互
    层叠的含义相当于我们画动画片，比如画一个耳朵。一层一层的增加样式内容，最初就是勾勒勒一个简单的轮廓。

css 的语法规范

配置全局代码片段

(1)内联样式

内联样式也可以叫行内样式，就是在 html ⽂件中的 html 标签中，使用 style 属性的样式值来完成元素的样式渲染。

<span style="样式声明"></span>
样式声明：

由样式属性和值组成；
属性和值之间用冒号连接；
多个样式声明用分号分隔。
特点：
写在标签里⾯，缺点是影响阅读，看着乱
不利于修改，复用性差。
优点:
指定当前标签，更加直接

<h1>没有加任何样式，只有标签⾃己的样式</h1>
<h1 style="color: red;">加⼊字体颜⾊样式</h1>
<h1 style="color: red;font-size: 40px;">加⼊字体颜色和字体⼤小样式</h1>
<h1 style="background-color: blue;font-size: 40px;">
加⼊入背景颜⾊和字体⼤小样式
</h1>

(2)内部样式

在⽹页的头部<head>标签中增加一对<style></style>标签，在<style>标签记中定义该⽹页的所有样式。

<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style>
	选择器 {样式列表}
	</style>
</head>

样式规则：

  • 由选择器和样式声明的列表组成
  • 就是把很多声明好的样式匹配给⻚面中的元素
    特点：
  • 需要选择器查找到元素,嵌⼊入到html文件中，会影响html文件的⼤小
  • 只能在当前⻚面使⽤
  • 优先级低于内联样式
  • 多⽤于测试和学习，不建议用在项⽬目中
    易错点（关于 标签的位置，会有⼏几种情况出现）
  • 写在 head 标签的哪个位置？应该在 body 标签中
  • 标签放错位置
  • 直接开始写样式，根本不管在哪个标签里，想写哪就写哪
  • 专注于写样式，连结构标签都写在 style 标签中

image

(3)外部样式

外部样式的书写方法

<head>
<link rel="stylesheet" href="wai.css" />
</head>
  • 单独创建css文件，在html的head标签中link标签引入css文件。
  • href 叫做超文本引用，它的属性值是需要引用css文件的路径。
  • rel属性指引入文件于当前html的关系，必写属性。
  • 样式规则：与内部样式相同，由选择器器和样式声明的列列表组成，把很多声明好的样式匹配给页⾯中的元素
    特点：
  • 所有⻚面都可以使用
  • 项⽬目中最重要的样式使⽤方式
  • ⼀般情况下级别低于内部样式，但如果外部样式在内部样式下⽅引用，则优先级可能高于内部样式
    易错点
    css文件和html文件的距离⾃己都不知道在哪，乱放，搞清楚自己的路径，相对路径还是绝对路径
    html 中没有引用外部 css ⽂件，检查<link>标签
    特别喜欢写相对路径（？），在某个盘符的某个⽂件夹中，不推荐这种写法，因为一旦更换文件位置马上找不到

href选择器进入这个css文件
image

5.css 的术语

  • 属性（如： color、 background-color）
  • 值（多指数字）
  • 关键字（css 中的关键单词⽐如 center）
  • 属性值（值+关键词+功能符 如： 1px solid rgb(0,0,0)）
  • 声明（属性加属性值 color： red；）
  • 功能符（函数）
  • 声明块{}
  • ⻓度单位 比如： px、 pt、 em、 rem、 vw、 vh、 %、 deg、 s、 ms 等
  • 规则集
    1. 不换行或者换行均可以，但建议换行更清晰
    2. 如果数值为 0 可以不写单位，其他必须写
    3. 一个样式声明列表中最后一个样式值可以不写分号其他必须写
    4. 多个{}之间不写分号
  • 选择器（⽤来选择目标元素的特定或者指定名字）

6.控制台调试代码

  • 打开控制台的方法（部分 windows 的打开⽅式是 f12 或者鼠标右键-检查）
  • 查看百度的控制台
  • 通过控制台拿到很多素材
  • 控制台的 elements 展示的就是 html 标签及嵌套关系
  • 找到元素的方式
  • 查看嵌套方式
  • 看看样式，暂时更改样式
    image

⼆、选择器

1.基础选择器

【注意】相同的选择器不同的属性声明，不会被覆盖而是共同应用。

（1）通用选择器

  • * 号，选择 html ⽂件内所有的元素*{样式声明}
  • 最常用的用法是 *{margin:0;padding:0} 清除浏览器的内外边距。但它的缺陷是性能太低，所有的元素不论是
    否有内外边距都会渲染，但可以做练习时使⽤用。

（2）元素选择器（标签选择器）

  • 通过标签的名字来选择 html 元素，权重值为 1，比如： div {样式声明}
  • 弊端是当很多相同标签并存的时候，就会出现没办法精准定位的情况

image

（3） id 选择器

  • 给标签的前半部分增加⼀一个属性 id 这个属性可以指定一个唯一的不重复的值，权重值100
  • <div id="abc">一个标签</div>
  • #abc {样式声明}
  • id 名不能以数字开头，不建议使⽤中文命名，尽量量见名知意
  • 多个单词连接可以用- 、 _、驼峰
  • 每个都有和其他重复的样式，使⽤用 id 有几个弊端，过于订制化导致每一个元素都要有⾃己的 id 有一套⾃己的样式，
    代码量过⼤重复性过大。明明有重复的内容，但通过 id 选择器只能是⼀一个一个的书写其样式，⼜不是很智能，如下
    image

(4）类选择器器【重要】

  • 类选择器先要使用标签的class属性赋值，类选择器的权重值 10
  • <div class="abc">一个标签</div>
  • .xxx {样式声明}
  • 类名不能以数字开头，不建议使用中文命名，尽量⻅名知意，多个单词连接可以用- 、 _、驼峰命名法
  • 一个元素可以创建多个类名，每个类名之间用空格分开 <div class="abc zyx">一个标签</div>
    易错点：
  • 忘记给元素增加 id 或者 class 属性就直接开始写 css 样式
  • class 的点，很容易忽略那个点
  • 先写类名还是先定义class属性

（5）群组选择器器

多个选择器名用逗号连接，可以一起完成共同样式的指定 div,p,span {color: red;}
群组选择器并不是只能使⽤相同类型的选择器，可以是各种选择器一起参与 #mydiv.b,h4 {color: blue;}
image

2.关系选择器

在 html 结构中存在三种关系， “兄弟关系”、 “⽗父子关系”、 “后代关系”

（1）后代选择器

image

  • 先代元素（祖先）选择器写在前⾯，之后写一个空格，空格后写后代元素选择器。
    - 祖先元素 后代元素 {样式声明}
  • 需要注意的是空格不要忘记，祖先元素不一定是父级和祖父级，还可以再往上的级别，都是可以的
  • 但有弊端就是级别不同的相同选择器名称，容易造成不想要的结果，因此当你需要更深的层次时，可以继续⽤用空格加
    入更更深层的后代    。
    image

（2）子代选择器

  • 可以选中某个元素的直接子元素，与后代不同的是子代选择器的范围更小。
    - 父级元素 > 子级元素 {样式声明}
  • 层级可以向后代选择器⼀样延申,区别就是子代是>连接,后代是空格连接 .baba > div > div {字体颜色;}
    image

（3）兄弟选择器/同级选择器

  • 同一层的关系选择器，可以选中该元素后面的兄弟元素。
    - 某元素选择器 ~ 该元素后面的所有兄弟 {样式声明}
  • 需要注意的是兄弟选择器可以选到该元素后面的兄弟，而选不到之前的。
    image

（4）相邻选择器

  • 同一层的关系选择器，可以选中参照的元素后面紧挨着被参照元素的选择器。
    - 某元素选择器 + 该元素后⾯面的唯一相邻的兄弟 {样式声明}
  • 需要注意的是，相邻兄弟选择器只能选中“紧紧相邻”的一个兄弟
    image

3.伪类选择器

  • 伪类选择器的作用是匹配同一个元素，不同状态下的样式

  • 选择器:伪类 {样式声明}

  • a:link {样式声明} 没有被打开之前，或者没被打开过（ a:link 特有）

  • a:visited {样式声明} 访问过后（ a:visited 特有）
    -div:hover {样式声明}⿏鼠标悬停

  • p:active {样式声明} 点击激活

  • input:focus {} 属性代表 input 标签获取焦点的样式( <input/> 标签的属性)

  • input:cheaked {} 属性代表 input 单选、复选等 type 类型被选中后的样式( <input/> 标签的属性)

      a:link {
  /* 没有被打开之前，或者没被打开过 */
  color: green;
  }
  
  a:visited {
  /* 访问过后 */
  color: green;
  }
  
  div:hover {
  /* ⿏鼠标移⼊入标签后展现 */
  background-color: aqua;
  }
  
  p:active {
  /* ⿏鼠标按住元素不不松⼿手 */
  background-color: blueviolet;
  }

4.伪元素选择器

  • CSS 伪元素⽤于设置元素的“指定部分”的样式
  • :before 表示元素最前边的部分，紧随着标签的部分
  • :after 表示元素的最后边的部分，紧随着标签的部分
  • :before{content:""} :after{content:""} 另外，content必须写
  • 两个冒号 ( :: ) 而不是一个冒号 ( : )，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素。大多数浏
    览器都⽀持这两种表示方式。
    image

5.css 优先级

（1）优先级的原则

  • 顺序读取的优先级：是相同类型选择器采用顺序读取后来的优先
  • 选择器的优先级：不同类型选择器，按照权重原则采用(id 选择器 100,类选择器 10,元素选择器 1)
  • 继承的优先级：制定样式的优先级大于继承样式的优先级
  • 多个选择器器一起使用的时候：根据权重值累加比较值后采⽤用优先级
  • 最高优先级： !important，直接获取最高优先级，内联样式不能加!important

（2）优先级的比重⼤小

按 CSS 引⼊入方式分: 内联样式 > 内部样式 > 外部样式
（但要注意：外部样式引用要在内部样式下面，才会低于内部样式的优先级）

按元素分: id选择器（100） > 类选择器（10） > 元素选择器（1）

这篇关于部分CSS基础的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航