部分CSS基础

2021/7/11 23:09:32

本文主要是介绍部分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基础的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程