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

一丶CSS简介

   叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化

​   特点:

      1.丰富的样式定义 ,易于使用和修改,多页面应用,页面压缩,层叠

      2.使数据和显示分开

      3.降低网络流量

      4.使整个网站视觉效果一致

      5.使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css）

二丶CSS的引入方式

行内样式

### 在body标签内

<!-- 行内样式:优先级最高-->

	<p style="color: darkcyan">唉不穿的覆盖惠健康</p>

内接样式

### 在head标签内

<!--  内接样式  -->

    <style>

        div{

            color: darkmagenta;

        }

    </style>

外接样式-链接式

### 在head标签内

<!--  外接样式 链接式  -->

    <link rel="stylesheet" href="commons.css">

外接样式-导入式

<!--外接样式 导入式 -->

    <style>

        @import url('commons.css');

    </style>

三丶CSS的基本选择器

​      CSS优先级 : id选择器 > 类选择器 > 元素选择器

标签选择器

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

body{

    color:gray;

    font-size: 12px;

}

/*标签选择器*/

p{

    color: red;

font-size: 20px;

}

span{

    color: yellow;

}

类选择器

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

<style>

	.lv{

     color: green;

     }

     .big{

         font-size: 40px;

     }

     .line{

        text-decoration: underline;

     }

</style>

<body>

<!-- 公共类    共有的属性 -->

     <div>

         <p class="lv big">段落1</p>

         <p class="lv line">段落2</p>

         <p class="line big">段落3</p>

    </div>

</body>

ID选择器

      同一个页面中id不能重复。

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

<style>

    #box{

        background:green;

    }

    #s1{

        color: red;

    }

    #s2{

        font-size: 30px;

    }

</style>

<body>

    <div id="box">娃哈哈</div>

    <div id="s1">爽歪歪</div>

    <div id="s2">QQ星</div>

</body>

通用选择器

<style>

    /*通用选择器:

       如果标签没有设置属性,会被统一进行操作.比如:上色

       所有的标签都会被选中*/

    * {

        color: yellow;

    }

</style>

<body>

    <p>段落</p>

    <div>div标签</div>

</body>

四丶CSS的高级选择器

后代选择器用法如下:

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

  1. CSS简单的四种引入方式

    CSS一共有四种引入方式 (1)最简单的两种方式是直接在html标签里面引入,或者在html文件前面声明,以下是简单的代码示例 <!DOCTYPE html> <html lang= ...

  2. CSS 文件的4种引入方式

    (1)链接式  : 在网页的<head></head>标签对中使用<link>标记来引入外部样式表文件,使用html规则引入外部css  (用得比较多) : < ...

  3. CSS文件的三种引入方式

    CSS的引入方式共有三种:行内样式.内部样式表.外部样式表. 一.行内样式 使用style属性引入CSS样式. 示例:<h1 style="color:red;">st ...

  4. CSS的四种基本选择器和四种高级选择器

    做个快乐的搬运工:https://blog.csdn.net/DYD850804/article/details/80997251

  5. HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类）

    一.标签选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  6. HTML+CSS教程（四）选择器（id选择器，类选择器，标签选择器，子代选择器，后代选择器，组选择器，伪类选择器）/css引入页面的形式（行内样式、内嵌样式、外联样式）

    一.回顾内容 前端的三大组成(三大模块)    HTMl(超文本标记语言) 结构层    css(层叠样式表) 表现层:用来美化HTML结构    JS(Java script)(脚本语言) 行为层: ...

  7. CSS引入方式的区别详解

    在web前端开发中,CSS是一种用来表现HTML或XML等文件样式的语言.很多处于web前端初学阶段的朋友,很多人都不知道CSS引入方式存在三种方法,css引入方式分别为标签内联书写.页面头部书写.外 ...

  8. CSS的引入方式

    再用HTML编写的文本中,有是没能达到我们想要的效果,此时此刻我们可以用过引用CSS来控制!这不仅使得效果好而且代码层次清晰.CSS的引入方式可以分为四类: 1.链入外部样式表,就是把样式表保存为一个 ...

  9. 2016/2/24 1,css有几种引入方式 2,div除了可以声明id来控制，还可以声明什么控制？ 3,如何让2个div，并排显示。4，清除浮动 clear：left / right / both

    1,css有几种引入方式 使用HTML标签的STYLE属性 将STYLE属性直接加在单个的HTML元素标签上,控制HTML标签的表现样式.这种引入CSS的方式是分散灵活方便,但缺乏整体性和规划性,不利 ...

随机推荐

  1. 小样本学习（few-shot learning）在文本分类中的应用

    1,概述 目前有效的文本分类方法都是建立在具有大量的标签数据下的有监督学习,例如常见的textcnn,textrnn等,但是在很多场景下的文本分类是无法提供这么多训练数据的,比如对话场景下的意图识别, ...

  2. Nat类型测试

    这是一个测试NAT类型的小工具,一般也没太多用处,只有游戏玩家可能需要用来测试你的网络NAT类型是什么.NAT类型一般分为以下4种: 1. Full Cone NAT (完全圆锥型)2. Restri ...

  3. 201871010117-石欣钰《面向对象程序设计（java）》第二周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...

  4. 解决opencart设置SSL后评论不能翻页的问题

    为了网站的安全和seo,我们为客户的opencart网站添加了SSL加密实现https,并设置了301跳转使http跳到https,基本所有的功能都完好,就是有一点评论分页无法加载分页,去分析了链接源 ...

  5. 微信公众平台iPhone版内测开始了

    5月9日晚些时候自媒体人收到了微信公众平台iPhone版的内测邀请,微信公众平台iPhone版可在手机上写图文,快速查看并回复粉丝消息.留言和赞赏,新建群发.查看群发历史和今日数据,这些功能很实用了, ...

  6. Java多态中成员的调用的特殊情况

    1.当子类和父类中有相同的成员属性的时候 public class Demo { public static void main(String[] args) { Father son=new Son ...

  7. JQuery校验时间大小

    常用于按时间条件(起始日-截止日)查询时,进行校验 function checkDate(){ var startTime = $('#startTime').val(); var endTime = ...

  8. nmap 速查手册

     0x00:说明 只是一个快速查询手册,理论的东西都没有补充,欢迎大家积极在评论区补充自己常用的参数,O(∩_∩)O 0x01:nmap功能介绍 1.主机存活检测2.端口探测3.服务识别4.操作系统识 ...

  9. 基于web公交查询系统---搭建mvc连接数据库（我的毕业设计，进度继续）

    建立一个spring的项目:我在已经做过的项目基础下做的,所以接口连接数据库挺快. 搭建好的.对应好数据库: 前几天进度已经完成简单的设计: 完成登录,用户管理(修改删除). 继续的数据库的信息获取, ...

  10. [Usaco2012 Feb] Cow Coupons

    [Usaco2012 Feb] Cow Coupons 一个比较正确的贪心写法(跑得贼慢...) 首先我们二分答案,设当前答案为mid 将序列按照用券之后能省掉的多少排序,那么我们对于两种情况 \(m ...