正文

前端css--引入方式和选择器

最底层  2022-02-14  444

关键词：

　引入css方式（重点掌握）

行内样式
内接样式
外接样式

　　　　　3.1 链接式

　　　　　3.1 导入式

css介绍

现在的互联网前端分三层：

HTML：超文本标记语言。从语义的角度描述页面结构。
CSS：层叠样式表。从审美的角度负责页面样式。
JS：JavaScript 。从交互的角度描述页面行为

CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。

css的最新版本是css3，我们目前学习的是css2.1

接下来我们要讲一下为什么要使用CSS。

HTML的缺陷：

不能够适应多种设备
要求浏览器必须智能化足够庞大
数据和显示没有分开
功能不够强大

CSS 优点：

使数据和显示分开
降低网络流量
使整个网站视觉效果一致
使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css）

比如说，有一个样式需要在一百个页面上显示，如果是html来实现，那要写一百遍，现在有了css，只要写一遍。现在，html只提供数据和一些控件，完全交给css提供各种各样的样式。

行内样式

1 <div>
2     <p style="color: green">我是一个段落</p>
3 </div>

View Code

内接样式

<style type="text/css">
    /*写我们的css代码*/
        
    span{
    color: yellow;
    }

</style>

View Code

外接样式-链接式

<link rel="stylesheet" href="./index.css">

外接样式-导入式

<style type="text/css">
        @import url(‘./index.css‘);
</style>

View Code

css的选择器：

1 .基本选择器包含：

1.标签选择器
标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“

body{
    color:gray;
    font-size: 12px;
}
/*标签选择器*/
p{
    color: red;
font-size: 20px;
}
span{
    color: yellow;
}

View Code

2.id选择器
# 选中id

同一个页面中id不能重复。
任何的标签都可以设置id
id命名规范要以字母可以有数字下划线 - 大小写严格区分 aa和AA是两个不一样的属性值

#box{
    background:green;
}
            
#s1{
    color: red;
}

#s2{
    font-size: 30px;
}

View Code

3.类选择器

所谓类：就是class . class与id非常相似任何的标签都可以加类，但是类是可以重复,属于归类的概念。同一个标签中可以携带多个类，用空格隔开

类的使用，能够决定前端工程师的css水平到底有多牛逼？

玩类了，一定要有”公共类“的概念。

 .lv{
     color: green;
 
 }
 .big{
     font-size: 40px;
 }
 .line{
    text-decoration: underline;

  }

 <!-- 公共类    共有的属性 -->
     <div>
         <p class="lv big">段落1</p>
         <p class="lv line">段落2</p>
         <p class="line big">段落3</p>
     </div>

总结：

不要去试图用一个类将我们的页面写完。这个标签要携带多个类，共同设置样式
每个类要尽可能的小，有公共的概念，能够让更多的标签使用

到底使用id还是用class？

答案：尽可能的用class。除非一些特殊情况可以用id

原因：id一般是用在js的。也就是说 js是通过id来获取到标签

2. 高级选择器分为：

后代选择器
子代选择器
并集选择器
交集选择器

后代选择器：

使用空格表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）

.container p{
    color: red;        
}
.container .item p{
    color: yellow;
}

View Code

子代选择器：

使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。

1 .container>p{
2     color: yellowgreen;
3 }

View Code

并集选择器：

多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素，可以使用并集选择器

/*并集选择器*/
h3,a{
    color: #008000;
    text-decoration: none;
                
}

View Code

比如像百度首页使用并集选择器。

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
      margin: 0;
      padding: 0
   }
/*使用此并集选择器选中页面中所有的标签，页面布局的时候会使用*/

View Code

交集选择器：

使用.表示交集选择器。第一个标签必须是标签选择器，第二个标签必须是类选择器语法：div.active

比如有一个<h4 class=‘active‘></h4>这样的标签。

那么

h4{
    width: 100px;
    font-size: 14px;
}
.active{
    color: red;
    text-decoration: underline;
}
/* 交集选择器 */
h4.active{
    background: #00BFFF;
}

View Code

它表示两者选中之后元素共有的特性。

01-css的引入方式和常用选择器

一、css介绍现在的互联网前端分三层：HTML：超文本标记语言。从语义的角度描述页面结构。CSS：层叠样式表。从审美的角度负责页面样式。JS：JavaScript。从交互的角度描述页面行为CSS：CascadingStyleSheet，层叠样式表。CSS的作用就... 查看详情

03前端--css内容

目录一、CSS介绍二、CSS语法三、CSS的引入方式3.1行内引入样式3.2内部引入样式3.3外部引入样式四、CSS选择器1、基本选择器4.1标签元素选择器4.2ID选择器4.3类选择器4.4通用选择器2.组合选择器2.1儿子选择器2.2后代选择器2.3毗邻选择... 查看详情

前端之css样式（选择器）。。。

前端之css样式（选择器）。。。一、css概述CSS是CascadingStyleSheets的简称，中文称为层叠样式表，对html标签的渲染和布局CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。例如二、css的四种引入方式1.行内式&... 查看详情

前端开发-css-上

CSS:1.css的引入方式2.基础选择器3.高级选择器4.选择器的优先级5.伪类选择器6.字体样式7.文本样式8.背景9.盒模型border10.margin11.padding1.css的引入方式<!DOCTYPEhtml><htmllang="cn"><head><metacharset="UTF-8"><title>css的引入方查看详情

前端基础css之选择器

css介绍css（cascadingstylesheet，层叠样式表）定义如何显示html元素。当浏览器读到样式表，它就会按照这个样式来对文档进行格式化（渲染）。css语法css实例每个css样式由两部分组成：选择器和声明。声明有包括属性和属性值。每... 查看详情

web前端第三篇css选择器

一、css概述CSS是CascadingStyleSheets的简称，中文称为层叠样式表，对html标签的渲染和布局CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。例如二、css的四种引入方式1.行内式行内式是在标记的style... 查看详情

前端基础css入门(代码片段)

【前端基础】CSS介绍css的介绍1.css的定义2.css的作用3.css的基本语法4.小结css的引入方式1.行内式2.内嵌式（内部样式）3.外链式4.css引入方式选择5.小结css的介绍学习目标能够知道css的作用1.css的定义css(CascadingStyleSheet)层叠样... 查看详情

前端-css

目录CSS总结CSS代码的引入方式选择器基本选择器组合选择器属性选择器伪类选择器伪元素选择器分组与继承CSS选择器的优先级属性高度宽度字体属性文字属性背景属性边框属性borderdisplay属性css盒子模型padding内边距margin外边距floa... 查看详情

前端--2css基础

CSS的部分：CSS四种类引入方式（了解）style的定义原则：基本选择器示例：层级选择器组合选择器后代选择器★子代选择器毗邻选择器普通兄弟选择器“与”选择器★“或”选择器★一个标签同时应用多个class自定义属性选择器... 查看详情

前端开发之css篇一

一、CSS介绍和语法二、CSS引入方式三、基本选择器四、高级选择器五、伪类选择器六、伪元素选择器 1?? CSS介绍和语法　　1、CSS的介绍　　（1）为什么需要CSS？　　使用css的目的就是让网页具有美观一致的页面，另外一... 查看详情

css引入方式选择器权重

...　　　　　　　　　　　　　css注释方式/* */一、Css引入方式　　1.行间样式style="key:value;"<divstyle="width:100px;height:100px;background:yellow;"></div 查看详情

必备前端基础知识-第二节1：css概述和选择器(代码片段)

文章目录一：CSS概述（1）概述（2）语法规范（3）CSS引入方式二：选择器（1）基础选择器①：标签选择器②：类选择器③：id选择器④：通配符选择器总结（2）复合选... 查看详情

必备前端基础知识-第二节1：css概述和选择器(代码片段)

css引入方式选择器

...据内容分离。步骤：　　A.找到标签B.操作标签一CSS四种引入方式1.行内式<pstyle="background-color:rebeccapurple">helloyuan</p>2.嵌入式<head><met 查看详情

css代码引入方式与基本选择器

...选择器，以及多条声明====================================css代码引入方式一、行内式（不涉及查找，跟html绑定，难维护）<pstyle="color:red;font-size:24px">helloworld</p>二、嵌查看详情

css引入方式，高级选择器

css引入方式： 1、内部样式 style标记在head标记中应用范围：当前整个页面中应用 2、行内样式 style属性查看详情

前端学习~css学习：样式表和选择器

本文主要内容CSS概述CSS和HTML结合的三种方式：行内样式表、内嵌样式表、外部样式表CSS四种基本选择器：标签选择器、类选择器、ID选择器、通用选择器CSS几种扩展选择器：后代选择器、交集选择器、并集选择器CSS样式优先级CSS... 查看详情

css03：css基础选择器与三种引入方式

基础选择器选择器：css选择html标签的一个工具，是将css与html建立起联系，那么css就可以控制html样式选择器其实就是给html标签起名字标签选择器作用：根据指定的标签名称，在当前界面中找到所有该名称的标签，然后设置属性... 查看详情

正文

前端css--引入方式和选择器

引入css方式（重点掌握）

行内样式

内接样式

外接样式

3.1 链接式

3.1 导入式

css介绍

HTML的缺陷：

CSS 优点：

行内样式

内接样式

外接样式-链接式

外接样式-导入式

总结：

不要去试图用一个类将我们的页面写完。这个标签要携带多个类，共同设置样式

每个类要尽可能的小，有公共的概念，能够让更多的标签使用

到底使用id还是用class？

2. 高级选择器分为：

后代选择器

子代选择器

并集选择器

交集选择器

后代选择器：

子代选择器：

并集选择器：

交集选择器：

01-css的引入方式和常用选择器

03前端--css内容

前端之css样式（选择器）。。。

前端开发-css-上

前端基础css之选择器

web前端第三篇css选择器

前端基础css入门(代码片段)

前端-css

前端--2css基础

前端开发之css篇一

css引入方式选择器权重

必备前端基础知识-第二节1：css概述和选择器(代码片段)

必备前端基础知识-第二节1：css概述和选择器(代码片段)

css引入方式选择器

css代码引入方式与基本选择器

css引入方式，高级选择器

前端学习~css学习：样式表和选择器

css03：css基础选择器与三种引入方式

　引入css方式（重点掌握）

　　　　　3.1 链接式

　　　　　3.1 导入式