前端基础学习04

前端基础学习04

CSS

CSS基础知识:
  1. CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。
  2. CSS 是一种标记语言,属于浏览器解释型语言,可以直接由浏览器执行,不需要编译。
  3. CSS 是用来表现HTML或XML的标记语言。
  4. CSS 是由W3C的CSS工作组发布推荐和维护的。
  5. CSS 是编程入门人员的必修课,运用CSS样式可以让页面变得美观。
  6. CSS语法由三部分构成:选择器、属性和值: selector {property: value} ,以分号结尾。
  7. 在属性名和属性值之间不要留空格,不然可能在有些浏览器中不能正常的工作。
CSS的基本使用方法

有四种方法可以在站点网页上使用样式表:

  1. 外联式Linking(也叫外部样式):将网页链接到外部样式表。具体语法为:
  <head>
	<link rel="stylesheet"type="text/css"href="mystyle.css">     
   </head>

其中:
1、href值为外部资源地址,这里是css的地址
2、rel定义当前文档与被链接文档之间的关系,这里是外部css样式表即stylesheet
3、type规定被链接文档的MIME类,这里是值为text/css

  1. 嵌入式Embedding(也叫内页样式):在网页上创建嵌入的样式表。

创建的代码片段位于<style></style>之间。

  1. 内联式Inline(也叫行内样式):应用内嵌样式到各个网页元素。

写在网页元素的开始标签里面,例如:
<p style="属性名:属性值;">
其中,优先级:内联式 > 嵌入式 > 外联式

CSS选择器

css可以有三种选择器:

  1. 网页元素选择器(标签选择器),例如<p>,<h1>等等,语法为:
 p{
 text-align:center;
 color:red;
 } 
  1. Id选择器,id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。 以下的样式规则应用于元素属性 id=“para1”:
#para1
 {
 text-align:center;
 color:red;
 } 

注意:

ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
ID属性只能在每个 HTML 文档中出现一次。

  1. class 选择器,用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。 class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示: 在以下的例子中,所有拥有 center 类的 HTML 元素均为居中。
.center {text-align:center;} 

你也可以指定特定的HTML元素使用class。 在以下实例中, 所有的 p 元素使用 class=“center” 让该元素的文本居中:

p.center {text-align:center;} 

在引用class类的时候可以使用多个类,中间用空格隔开,例如:

<p class="class1 class2 class3 ...">
/*这些类的优先级一样,如果对同一个属性做了更改,
该元素会使用最后一个出现在css文件中的类*/

注意: 类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。

  1. 第四种选择器即直接在标签内部写css代码。例如:
<h3 style="color:red;">W3cschool教程</h3>

这四种选择器的优先级别顺序:
内部css>id>class>标签选择器>继承的css

CSS选择器优先级

下列是一份优先级逐级增加的选择器列表,其中数字 7 拥有最高的优先权:

  1. 通用选择器(*)
  2. 元素(类型)选择器
  3. 类选择器
  4. 属性选择器
  5. 伪类
  6. ID 选择器
  7. 内联样式
  8. !important 规则例外

当 !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明,无论它处在声明列表中的哪里。尽管如此,!important规则还是与优先级毫无关系。使用 !important 不是一个好习惯,因为它改变了你样式表本来的级联规则,从而使其难以调试。

CSS 优先级法则
  1. 选择器都有一个权值,权值越大越优先;
  2. 当权值相等时,后出现的样式表设置要优于先出现的样式表设置;
  3. 创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式;
  4. 继承的CSS 样式不如后来指定的CSS 样式;
  5. 在同一组属性设置中标有"!important"规则的优先级最大;
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页