部分CSS基础

时间  2021-08-15 标签 javascript php css html java 编程 windows 编程语言 ide 函数

css 的概念

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

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

css 的语法规范

配置全局代码片断php

(1)内联样式

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

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

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

<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>标签记中定义该⽹页的全部样式。java

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

样式规则：编程

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

image

(3)外部样式

外部样式的书写方法windows

<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.基础选择器

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

（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）

联系我们 沪ICP备13005482号-10