〇三——css常规使用
我们在前面已经学习了常用的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常规使用的更多相关文章
- web基础 (三) CSS
css 层叠样式表 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. selector { property: value; property: value; ... property: ...
- 三.CSS层叠机制
概述 层叠就是对样式的层叠.是某种样式在样式表中逐层叠加的过程.让浏览器对某个标签特定属性值的多个来源,最终确定使用那个值.层叠是整个CSS的核心机制. HTML文档样式的来源 1.浏览器默认样式,每 ...
- 3月22日 html(三)css样式表
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例 ...
- WEB入门三 CSS样式表基础
学习内容 Ø CSS的基本语法 Ø CSS选择器 Ø 常见的CSS样式 Ø 网页中3种使用CSS的方式 能力目标 Ø 理解CSS的 ...
- CSS基础语法(三) CSS的6种特性
样式表常用写法及特性(组合.继承.关联性.权值性.层叠性.重要性) 1.样式的组合:把具有相同声明定义的选择符组合在一起,并用逗号隔开.-例如:段落元素p.单元格元素td和类c1可以使用相同样式: p ...
- [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器
一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...
- MySQL学习笔记——〇三 MySQL习题
在前面讲了MySQL的初步使用方法以后,在这里放出来一些案例来看看怎么做. 先看看database的结构,一共5个表 外键关系: class的cid是student的class_id的外键,teach ...
- 三 CSS基础入门
CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 CSS实例 ...
- (三)CSS高级语法
选择器分组 可以对选择器进行分组,被分组的选择器可以分享相同的声明,用逗号将需要分组的选择器分开.例如: h1,h2,h3,h4,h5,h6 { color: green; } 继承以及其问题一般,子 ...
随机推荐
- jdk1.8-ArrayList源码分析
一:idea可以自动生成UML类图,ctrl+alt+u ArrayList类图 我没们看下类的继承关系 ) { ) { ) { )) )) newCapacity = minCapacity) ne ...
- yum安装etcd集群
前一篇文章介绍了如何yum安装简单的kubernetes集群,其中etcd是单点部署.本篇我们来搭建etcd集群,方便日后搭建kubernetes HA集群架构. 1,环境配置说明 etcd1 ...
- Python爬虫学习==>第二章：MongoDB环境配置
学习目的: MongoDB的安装 正式步骤 (VMWare 虚拟机上无法安装这个MongoDB的自启动服务,如果你能办到,请多赐教) Step1:MongoDB的简介 MongoDB是一个基于分布式文 ...
- Django-ORM之ForeignKey的使用-多对一关系
ForeignKey使用俩表示两张表多对一关系的外键,外键字段要定义在多属性的表中. 定义外键时,to的表可以直接写类名,但是需要注意类的定义顺序:也可以写字符串式的类名,这样就可以忽略class类的 ...
- 【AMAD】django-extensions -- Django框架的自定义命令扩展集合
动机 简介 个人评分 动机 使用Django进行开发的时候,会不会感觉开发工具少了一些.比如每次进入python shell调试的时候要重新import每个model. 简介 django-exten ...
- 目前最新u盘启动快捷热键一览表
现在重装系统已不再是件难事了,一个普通的u盘就可以帮你搞定,但是对于一些新手来说在使用u盘启动盘安装系统是也许会遇到这样的小问题,面对一台新电脑时不知道该如何让电脑优先访问u盘从而进入PE系统下进行装 ...
- 【神经网络与深度学习】Google Protocol Buffer介绍
简介 什么是 Google Protocol Buffer? 假如您在网上搜索,应该会得到类似这样的文字介绍: Google Protocol Buffer( 简称 Protobuf) 是 Googl ...
- java将base64解析图片保存到本地。
将base64解析图片保存到本地的两个方法 /** * base64转图片 * @param base64str base64码 * @param savePath 图片路径 * @return */ ...
- VS2008新增文件没有模板
可能是我安装的过程中发神经没有选中选项什么的,打开来想建个项目发现一个模板都没有,那就很尴尬了,作为对开发工具极度依赖的人,这真的难受... 在网上找到别人的办法 开始 –> 程序 –> ...
- 2019牛客暑期多校训练营（第二场）-D Kth Minimum Clique
题目链接:https://ac.nowcoder.com/acm/contest/882/D 题意:求给定点权无向图中,点权和第k小的完全子图的点权和.(包括空集) 思路:从空集开始,每找到一个完全子 ...