我们在前面已经学习了常用的html基础，就可以画出一个最直接的‘裸体’ ，那么这么画出来的比较简陋，那怎么能让他变得更漂亮呢？这里就引出今天要讲的——css

我们先看看怎么把页面加上修饰的效果

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div>1</div>

    <div>2</div>

    <div>3</div>

</body>

</html>

上面的代码是一个最简单的页面，然后用style属性吧第一个div装饰一下

<div style="background-color: #2549a2;height:30px">1</div>

那如果我们需要把所有的div都用相同的效果装饰一下，最简单方式是把每个div都加上相同的style属性

<body>

    <div style="background-color: #2549a2;height:30px">1</div>

    <div style="background-color: #2549a2;height:30px">2</div>

    <div style="background-color: #2549a2;height:30px">3</div>

</body>

那么如果有好多个div需要装饰，可见这个方式是不行的，下面我们分部来看怎么做！

CSS和选择器

1.css文件

这里就要先引入css的概念，就是把style里的属性放在一块，写在一个style标签内

<body>

    <style>

        #i1{background-color: red;

            height: 30px;}

    </style>

    <div id="i1">1</div>

    <div>2</div>

    <div>3</div>

</body>

这个#i1就是一个id选择器，只要后面有标签的id和要求的一样，就直接套用上。可是前面说过，控件的id是不能重复的，那我们也不能有几个控件写几组style效果吧，看看div的一个新属性——class

<body>

    <style>

        .c1{background-color: red;

            height: 30px;}

    </style>

    <div class="c1">1</div>

    <div class="c1">2</div>

    <div class="c1">3</div>

</body>

这样就可以了。这个class就是最常用的类选择器。

还有一种选择器：在效果前直接放上标签

<body>

    <style>

        div{background-color: red;

            height: 30px;}

    </style>

    <div class="c1">1</div>

    <span class="c1">2</span>

    <div class="c1">3</div>

</body>

</html>

这种方式叫标签选择器。

下面的是一种层级标签

<body>

    <style>

        span div{background-color: red;

            height: 30px;}

    </style>

    <div class="c1">1</div>

    <span class="c1">

        <div>123</div>

        12345

    </span>

    <div class="c1">3</div>

</body>

我们在css里定义了只对span里的div起效果。就是层级选择器。或者叫关联选择器。他可以多层级选择，每个层级用空格分隔，但是不要用的太深。

组合选择器

<body>

    <style>

        #i1,#i2,#i3{background-color: red;

            height: 30px;}

    </style>

    <div id="i1">1</div>

    <div id="i2">2</div>

    <div id="i3">3</div>

</body>

</html>

我们在css里用逗号把多个值分开，就实现了多个控件的选择。

属性选择器

属性选择器是根据属性来做

<body>

    <style>

        input[type='text']{width:100px;height:200px;}

    </style>

    <div id="i1">

        <input type="text">

        <input type="password">

    </div>

    <div id="i2">2</div>

    <div id="i3">3</div>

</body>

通过对选择到的标签在通过属性再进行一次筛选。

上面就是最常用选择器

CSS的存在形式和优先级

css的优先级

我们看看下面的代码

<body>

    <style>

        .c1{background-color: pink;}

        .c2{background-color: red;}

    </style>

    <div class="c1 c2" style="background-color: blue;">123</div>

</body>

出来的效果是什么呢？不截图了，是蓝色的。所以css里的优先级是：标签上的style，然后是css里的编写顺序（靠下的优先）。

css的存在形式

我们现在都是把css放在body标签内的，但是如果有多个html文件都需要用到这一段效果，在每个文件里都复制粘贴一遍显然是不现实的。那怎么才能更有效率呢？我们可以把所有的style里的代码拿出来放在一个文件里，这个文件就是css文件。然后我们在head里把这个文件倒进去就可以了

##########test.css##########

.c1{background-color: red}

.c2{background-color: black}
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel='stylesheet' href="test.css">

</head>

<body>

    <div class="c1">1</div>

    <div class="c2">2</div>

    <div class="c1">3</div>

</body>

</html>

这样，在每个html文件里引入一下，就可以使用这个css文件，提高了代码的重用性。

〇三——css常规使用的更多相关文章

  1. web基础 (三) CSS

    css 层叠样式表 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. selector { property: value; property: value; ... property: ...

  2. 三.CSS层叠机制

    概述 层叠就是对样式的层叠.是某种样式在样式表中逐层叠加的过程.让浏览器对某个标签特定属性值的多个来源,最终确定使用那个值.层叠是整个CSS的核心机制. HTML文档样式的来源 1.浏览器默认样式,每 ...

  3. 3月22日 html(三)css样式表

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例 ...

  4. WEB入门三 CSS样式表基础

    学习内容 Ø        CSS的基本语法 Ø        CSS选择器 Ø        常见的CSS样式 Ø        网页中3种使用CSS的方式 能力目标 Ø        理解CSS的 ...

  5. CSS基础语法(三) CSS的6种特性

    样式表常用写法及特性(组合.继承.关联性.权值性.层叠性.重要性) 1.样式的组合:把具有相同声明定义的选择符组合在一起,并用逗号隔开.-例如:段落元素p.单元格元素td和类c1可以使用相同样式: p ...

  6. [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器

    一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...

  7. MySQL学习笔记——〇三 MySQL习题

    在前面讲了MySQL的初步使用方法以后,在这里放出来一些案例来看看怎么做. 先看看database的结构,一共5个表 外键关系: class的cid是student的class_id的外键,teach ...

  8. 三 CSS基础入门

    CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 CSS实例 ...

  9. (三)CSS高级语法

    选择器分组 可以对选择器进行分组,被分组的选择器可以分享相同的声明,用逗号将需要分组的选择器分开.例如: h1,h2,h3,h4,h5,h6 { color: green; } 继承以及其问题一般,子 ...

随机推荐

  1. H3C 模拟器 防火墙开启Web功能

    最近在搞运维的一些事情,由于缺少实体的机器来进行操作,先在模拟器里面进行 环境 windows 10,模拟器 HCL_V2.1.1 防火墙 1 在windows添加虚拟网卡 我的电脑--管理--设备管 ...

  2. 从内存上看python的对象

    python中有一个说法:一切皆是对象,怎么理解这句话呢?我们可以通过查看数字,字符串在内存中的表示形式来对这句话有个更深的认识. 那么,怎么查看对象在内存中是什么样的呢?可以先参考一些这篇文章:ht ...

  3. 自定义 filter simple_tag inclusion_tag 总结

    在已经注册的app下创建templatetags的python包 在包内创建py文件 my_tags.py 在py文件中写代码: from django import template registe ...

  4. PI膜概述

    一.概述 1.简述 聚酞亚胺薄膜又称PI薄膜(polyimide filin)是一种含有酞亚胺或丁二酞亚胺的绝缘类高分子材料.是目前工程塑料中耐热性最好的品种之一. 2.发展简史 1908年,PI聚合 ...

  5. Ubuntu重启关机命令

    重启命令 :  1.reboot 立刻重启 2.shutdown -r now 立刻重启 3.shutdown -r 10 过10分钟自动重启 4.shutdown -r 20:35 在时间为20:3 ...

  6. 【机器学习】Learning to Rank之Ranking SVM 简介

    Learning to Rank之Ranking SVM 简介 排序一直是信息检索的核心问题之一,Learning to Rank(简称LTR)用机器学习的思想来解决排序问题(关于Learning t ...

  7. 【VUE】vue在vue-cli3环境下基于axios解决跨域问题

    网上的绝大部分教程解决vue+axios跨域问题都不能直接适用vue-cli3.这是因为vue-cli3不一样的配置方式导致的. 如果是使用vue-cli3构建的项目,那么默认是没有config.js ...

  8. 论文阅读 | Real-Time Adversarial Attacks

    摘要 以前的对抗攻击关注于静态输入,这些方法对流输入的目标模型并不适用.攻击者只能通过观察过去样本点在剩余样本点中添加扰动. 这篇文章提出了针对于具有流输入的机器学习模型的实时对抗攻击. 1 介绍 在 ...

  9. Hadoop三种架构介绍及搭建

    apache  hadoop三种架构介绍(standAlone,伪分布,分布式环境介绍以及安装) hadoop 文档 http://hadoop.apache.org/docs/ 1.StandAlo ...

  10. Zabbix-自带监控项与Kye

    开启主机自动发现 ⦁选择配置 ->自动发现 ->创建自动发现->ip范围必须连续,不连续的话逗号分开 ⦁更新间隔 -> 2s ->更新 ⦁检查 -> 选择新的 -& ...