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

 引入css方式(重点掌握)

  1. 行内样式

  2. 内接样式

  3. 外接样式

     3.1 链接式

     3.1 导入式

css介绍

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

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

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

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

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

HTML的缺陷:

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

CSS 优点:

  1. 使数据和显示分开
  2. 降低网络流量
  3. 使整个网站视觉效果一致
  4. 使开发效率提高了(耦合性降低,一个人负责写html,一个人负责写css)

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

行内样式

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

内接样式

<style type="text/css">
    /*写我们的css代码*/

    span{
    color: yellow;
    }

</style>

外接样式-链接式

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

外接样式-导入式

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

css的选择器:

1 .基本选择器包含:

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

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

2.id选择器
# 选中id

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

#box{
    background:green;
}

#s1{
    color: red;
}

#s2{
    font-size: 30px;
}

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;
}

子代选择器:

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

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

并集选择器:

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

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

}

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

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
   }
/*使用此并集选择器选中页面中所有的标签,页面布局的时候会使用*/

交集选择器:

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

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

那么

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

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

原文地址:https://www.cnblogs.com/xiangweilai/p/9662484.html

时间: 2024-10-28 20:23:27

前端css -- 引入方式和选择器的相关文章

前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器

前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器 一丶CSS简介 ???叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化 ????特点: ??????1.丰富的样式定义 ,易于使用和修改,多页面应用,页面压缩,层叠 ??????2.使数据和

前端之CSS的属性引入方式、选择器、选择器优先级

目录 1011 前端之CSS的属性引入方式.选择器.选择器优先级 一.CSS介绍 二.CSS语法 2.1CSS实例 2.2 CSS注释 三.css属性的引入方式 3.1 行内样式 3.2 内部样式 3.3 外部样式 四.CSS选择器 4.1 元素(标签)选择器 4.2 id选择器 4.3 类选择器 4.4 通用选择器 4.5 后代选择器 4.6 儿子选择器 4.7 毗邻选择器 4.8 兄弟选择器 4.9 属性选择器 4.10 分组和嵌套选择器 4.11 伪类选择器 4.12 伪类元素选择器 五.

前端——CSS的引入方式、选择器

前端--CSS的引入方式.选择器 什么是CSS? 层叠样式表(就是用来调节标签的样式) CSS注释 /*单行注释*/ /*多行注释1 多行注释2 多行注释3 */ 注释的使用 css应该是一个独立的文件 /*页面通用样式*/ /*顶部导航栏样式*/ /*侧边菜单栏样式*/ -- css语法结构 选择器 {属性名1:属性值1;属性名2:属性值2;属性名3:属性值3;--} css三种引入方式 外部css文件(最正规的书写方式) /*mycss*/ /*这是一个非常牛逼的页面的css样式文件*/ /

CSS引入方式,高级选择器

css引入方式:  1.内部样式      style标记      在head标记中     应用范围:当前整个页面中应用  2.行内样式      style属性      <p  style="color:black; font-size:24px">行内样式</p>    应用范围:指定的标签内应用,优先级高于内部样式     不太推荐用这种方式  3.外部样式      声明:.css样式文件       引入:         链接方式:<li

项目复习期总结3:CSS引入方式,注释,命名规范,背景,行高,文本属性

目录: 1.CSS注释的书写 怎么写?好处? 2.CSS引入方式  各种的优缺点 3.选择器的写法与选择器的优先级 4.CSS命名规范 5.背景,行高 6.文本(text与font开头)等所有属性 ① CSS注释书写规范: 1.单行注释:    直接写在属性值的后面,如: ① .search{ border:1pxsolid#fff;/*定义搜索输入框边框*/ background:url(../images/icon.gif)no-report#333;/*定义搜索框的背景*/ } ② .wr

CSS引入方式的区别详解

在web前端开发中,CSS是一种用来表现HTML或XML等文件样式的语言.很多处于web前端初学阶段的朋友,很多人都不知道CSS引入方式存在三种方法,css引入方式分别为标签内联书写.页面头部书写.外部引入,那么这三者有何区别?本文给大家讲解了从不同的角度分析他们的优势与劣势. 1.外部引入: 在HTML的head部分<link rel="stylesheet" type="text/css" href="css文件路径">,引入外部

项目复习期总结3:CSS引入方式,凝视,命名规范,背景,行高,文本属性

文件夹: 1.CSS凝视的书写 怎么写?优点? 2.CSS引入方式  各种的优缺点 3.选择器的写法与选择器的优先级 4.CSS命名规范 5.背景,行高 6.文本(text与font开头)等全部属性 ① CSS凝视书写规范: 1.单行凝视:    直接写在属性值的后面.如: ① .search{ border:1pxsolid#fff;/*定义搜索输入框边框*/ background:url(../images/icon.gif)no-report#333;/*定义搜索框的背景*/ } ② .w

css引入方式

1.<style>          body{}    </style> 2.写在一个单独的文件里面保存即新建一个文件:xx.css; 注明该文件的位置<link rel="stylesheet" href="./Untitled-2.css"/> 3.直接在html标签里面写入对这个标签的css控制如:<div style="color:green;">css引入方式 </div>

浅谈CSS,引入方式,选择器

全称Cascading Style sheets ,中文名称:层叠样式表/级联样式表.CSS就是给我们的HTML网页加样式的东西,它可以让我们的html网页变得更加绚丽多彩,它有三种引入方式. 第一种内嵌式:直接写在我们的html标签里面的,如:  <div style="属性:属性值;"> </div>        这就是内嵌也叫嵌入. 第二种内联写法:在我们的html网页里面的head里面添加一个style标记,然后在里面写,如: <head>