前端（二）之 CSS
前端之 CSS
前言
昨天学习了标记式语言，也就是无逻辑语言。了解了网页的骨架是什么构成的，了解了常用标签，两个指令以及转义字符；其中标签可以分为两大类：
- 一类是根据标签内容可以分类单双标签，单标签指的是不需要字内容，标签就可以代表所有功能；双标签：主内容可以包含文本，也可以包含子标签（具有作用域）；
- 另一类是根据标签显示的效果可以分为行块标签，块标签会换行显示；行标签会同行显示。
今天学习 CSS，被称之为网页的化妆师。
什么是 CSS
CSS 全称为级联样式表（Cascading Style Sheet），主要负责页面的风格设计，样式、美观。通常以.css 后缀结尾。
标记语言
和 html 一样是非编程语言，不具备语言的程序逻辑。
css 为前端页面的样式，由选择器、作用域与样式块组成。
选择器：由标签、类、id 单独或组合出现；
作用域：一组大括号包含的区域；
样式块：满足 css 连接语法的众多样式。
css 发展史代表版本
① 1990年，Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年，Web真正走出实验室。
② 1994年哈坤·利提出了CSS的最初建议。而当时伯特·波斯（Bert Bos）正在设计一个名为Argo的浏览器，于是他们决定一起设计CSS。
③ 哈坤于1994年在芝加哥的一次会议上第一次提出了CSS的建议，1995年的www网络会议上CSS又一次被提出，博斯演示了Argo浏览器支持CSS的例子，哈肯也展示了支持CSS的Arena浏览器。
④ 1997年初，W3C组织负责CSS的工作组开始讨论第一版中没有涉及到的问题。其讨论结果组成了1998年5月出版的CSS规范第二版。
⑤ CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。
CSS 书写语法
css 由三部分组成：选择器、作用域与样式块。
选择器 {
样式1: 值1;
样式2: 值2;
}
h3 {
width: 100px;
height: 100px;
background-color: yellowgreen
}
CSS 的三种引入方式
第一种引入方式：行间式
特点：
- 书写在标签的 style全局属性中；
- 样式格式为=》key：value（单位）；
- 以分号隔开多个样式；
- 最后的分号可以省略
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 三种引入第一种引入</title>
</head>
<body>
<!-- 默认有宽 高为0 背景颜色默认为透明 -->
<p style="width: 200px; height: 200px; background-color: green">css 第一种引入行间式</p>
</body>
</html>
第二种引入方式：内联式
特点：
- 样式书写在 head 标签内的 style 属性内；
- 样式格式为 => 选择器：p|作用域 {}|样式块；
- 以分号隔开多个样式；
- 最后的分号可以省略
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>css 三种引入第二种引入</title>
<!-- 内联式 -->
<style type='text/css'>
p {
width: 150px;
height: 150px;
background-color: red
}
</style>
</head>
<body>
<p>
css 第二种引入内联式引入
</p>
</body>
</html>
第三种引入方式：外联式
特点：
- 书写在外部的 css文件中，不需要书写任何标签；
- 其他同上
/*css 文件书写 css 语法*/
/*外部 css 文件 00.css*/
h3 {
width: 100px;
height: 100px;
background-color: yellowgreen
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>第三种引入外联式引入</title>
<link rel='stylesheet' href='./00.css'>
<h3>
第三种引入外联式引入
</h3>
</head>
</html>
CSS 三种引入方式的优先级
三种可以同时存在并协同完整布局，三种引入方式之间没有优先级之说，哪种引入方式在逻辑下方（后解释的）谁就起作用（样式覆盖）。并且行间式一定是逻辑最下方的。
当三种引入方式同时存在且操作同一对象的同一属性时，才会出现冲突，最终起作用的就是优先级高的。
/*o4.css*/
div {
height: 200px;
color: brown;
}
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>三种引入的优先级</title>
<!-- 三种可以同时存在，协同完整布局 -->
<!-- 三种之间没有优先级之说 谁在逻辑下方（后解释的）谁就起作用（样式覆盖） -->
<!-- 行间式一定是逻辑最下方的 -->
<!-- 内联 -->
<style type="text/css">
div {
width: 200px;
color: pink;
/*height: 200px;*/
}
</style>
<!-- 外联 -->
<link rel="stylesheet" href="./04.css">
</head>
<body>
<!-- 优先级：大家同时存在且操作统一对象同一属性，才会出现冲突，最终起作用的就是优先级高的 -->
<!-- 行间 -->
<div style="background-color: cyan; color: orange">你是个好人</div>
</body>
</html>
基础选择器
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
<style type="text/css">
/* div => 标签名 =》 标签选择器：开发过程中尽可能少的运用，运用范围为最内层的显示层 */
/* dd => class 名 =》 类选择器：布局的主力军 */
/* d => id名 =》 id 选择器：一定唯一的 */
/* * => 通配选择器 =》控制 html,body,body 下所有用于显示内容的标签（head 不参与显示）*/
* {
border: 1px solid black;
}
/* 三种选择器有优先级*/
div {
width: 200px;
height: 200px;
background-color: red;
}
/* 类选择器： .类名{} */
.dd {
background-color: orange;
}
/* id 选择器： #id名 {}*/
#d {
background-color: green;
}
/* 优先级：id 选择器 > 类选择器 > 标签选择器 > 通配选择器*/
/* 作用范围越精确，优先级越高*/
</style>
<style type="text/css">
.div {
width: 100px;
height: 100px;
background-color: orange
}
/* 多类名：类名与类名之间不能拥有任何符号隔断 */
.red.div{
}
.div.red {
background-color: red;
}
</style>
</head>
<body>
<!-- ***** -->
<!-- 选择器：css 选择 html 标签的一个工具 =》将 html 与 css 建立起联系，那么 css 就可以控制 html样式 -->
<!-- 选择器就是给 html 标签起名字 -->
<div></div>
<div class="dd"></div>
<div class="dd" id="d"></div>
<div class="div red"></div>
<div class="div"></div>
</body>
</html>
长度单位与颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>长度单位与颜色</title>
<style type="text/css">
.div {
/*px mm cm in em vw vh*/
width: 200px;
height: 200px;
/*颜色单词 | rgb() 0~255 | rgba | #六个十六进制数*/
background-color: rgba(255,0,255,0.5);
/* #abc == #AABBCC*/
background-color: #00FFFF
}
</style>
</head>
<body>
<div class="div"></div>
</body>
</html>
文本样式操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本样式操作</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background-color: orange
}
/*字体样式*/
.box {
width: 400px;
/*字族*/
/* STSong 作为首选字体，微软雅黑作为备用字体*/
font-family: 'STSong','微软雅黑';
}
.box.uu {
/* 字体大小*/
font-size: 40px;
/*字重*/
font-weight: 100;
/*风格*/
/*none清除系统字体风格*/
/*font-style: none;*/
font-style: italic;
/*行高：某一段文本在自身行高中可以垂直居中显示=》文本垂直居中*/
line-height: 200px;
/*字体整体设置*/
/*字重 风格 大小/行高 字族 （风格可以省略）*/
font: 100 normal 60px/200px 'STSong';
/*}
i {
Normal 清除系统字体风格
font-style: normal;
}*/
</style>
<style type="text/css">
.wrap {
width: 200px;
height: 200px;
background-color: yellow;
}
.w1 {
/*换行方式*/
word-break: break-all;
}
.w2 {
width: 400px;
/*水平居中：left|center|right*/
/*text-align: center;*/
/*字划线 中下上划线*/
text-decoration: line-through;
text-decoration: underline;
text-decoration: overline;
/*字间距*/
letter-spacing: 5px;
/*词间距*/
word-spacing: 5px;
/*缩进*/
/*1em 相当于一个字的宽度*/
text-indent: 2em;
}
a {
/*取消划线*/
text-decoration: none
}
</style>
</head>
<body>
<div class="box uu">[普通文本]</div>
<i>i的文本</i>
<div class="wrap"> 一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五</div>
<hr>
<div class="wrap w1"> 一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二</div>
<hr>
<div class="wrap w2">hello world hello world</div>
<a href="sfjsflj">aaa</a>
</body>
</html>
display
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display</title>
<style>
.box {
width: 80px;
height: 40px;
background-color: orange
}
.box {
/*block: 块级标签，独占一行，支持所有 css 样式*/
/*display: block;*/
/*inline：内联（行级）标签，同行显示，不支持宽高*/
/*display: inline;*/
/*inline-block：内联块标签，同行显示，支持所有 css 样式*/
display: inline-block;
/*标签的嵌套规则*/
/*block 可以嵌套所有显示类型标签，div|h1~h6|p，*/
/*注：hn 与 p 属于文本类型标签，所以一般只嵌套inline 标签*/
/* inline 标签只能嵌套 inline 标签，span|i|b|sub|sup|ins|
/*inline-block 可以嵌套其他类型标签，但不建议嵌套任意类型标签 img|input*/
}
.b1 {
height: 100px;
}
.b2 {
height: 80px;
}
.b3 {
height: 120px;
}
.box {
/*文本基线对齐*/
vertical-align: baseline;
}
</style>
</head>
<body>
<div class="box b1">123</div>
<div class="box b2">456</div>
<div class="box b3">789</div>
</body>
</html>
前端（二）之 CSS的更多相关文章
- 前端二：CSS
CSS: 一:介绍:学名层叠样式表(Cading Style Sheets)是一种用来表现HTML或者XML等文件的样式的计算机语言.让HTML和XML看起来更加美观. 语法:<style> ...
- 前端(二)：css样式
本节笔记根据css中文手册整理,内容已做成思维导图.下载地址https://files.cnblogs.com/files/kuaizifeng/css.xmind.zip. css(Csacadin ...
- 前端之DIV+CSS布局
刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了. 而现在开始自己练习项目,发现前端知识 ...
- 前端Html和Css面试题
前端Html和Css面试题Html篇:1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Ope ...
- 2.前端笔记之css
title: 1.前端笔记之CSS date: 2016-04-05 23:05:51 tags: 前端 categories: w3c --- 作者:刘耀 **出处:http://www.liuya ...
- 前端html、CSS快速编写代码插件-Emmet使用方法技巧详解
前端html.CSS快速编写代码插件-Emmet使用方法技巧详解 Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来 ...
- 前端优化：css雪碧图实践应用详解
一 为什么需要使用雪碧图 二CSS雪碧图原理及应用 前端是接近用户体验的一个项目组成部分,合适的优化能够大大减少网页响应时间,合理的资源加载自然成为了工作中的要务,现在就结合实例讲解到底什么是css雪 ...
- 还需要学习的十二种CSS选择器
在前面的文章中,我们在介绍了<五种你必须彻底了解的CSS选择器>,现在向大家介绍,还需要学习的另外十二种CSS选择器.如果你还没有用过,就好好学习一下,如果你已经熟知了就当是温习. 一.X ...
- 1+x证书Web前端开发HTML+CSS专项练习测试题（八）
1+x证书Web前端开发HTML+CSS专项练习测试题(八) 官方QQ群 1+x 证书 Web 前端开发 HTML+CSS 专项练习测试题(八) http://blog.zh66.club/index ...
- 前端第二篇---前端基础之CSS
前端第二篇---前端基础之CSS 目录 一.css介绍 二.css语法 三.css的几种引入方式 四.css选择器 五.css属性相关 六.盒子模型 拓展 一.css介绍 CSS(Cascading ...
随机推荐
- BP神经网络 详解模板
%原始数据输入 P=[ - 6.142 - 27.5 5.068 - 31.7 5.196 - 34.1 6.362 - 31.54 6.472 - 30.17 6.578 - 29.53 6.351 ...
- 基于UML网络教学管理平台模型的搭建
一.基本信息 标题:基于UML网络教学管理平台模型的搭建 时间:2013 出版源:网络安全技术与应用 领域分类:UML:网络教学管理平台:模型 二.研究背景 问题定义:网络教学管理平台模型的搭建 难点 ...
- go网络编程应用
网络编程基础(聊天室) 服务端 package main import ( "fmt" "net" "strings" "os&q ...
- 记录一次Service被注入mapper实例的错误
在一个搭建框架为SSM的项目中,有一个需求是数据库更新同步Solr索引库的数据. 在使用ActiveMQ作为中间件,实现这个需求时却发生了一个错误. 在Listener实现类里我想注入一个Servic ...
- Python之配置日志的几种方式（logging模块）
原文:https://blog.csdn.net/WZ18810463869/article/details/81147167 作为开发者,我们可以通过以下3种方式来配置logging: 1)使用Py ...
- RabbitMQ 任务分发机制
在上篇文章中,我们解决了从发送端(Producer)向接收端(Consumer)发送“Hello World”的问题.在实际的应用场景中,这是远远不够的.从本篇文章开始,我们将结合更加实际的应用场景来 ...
- Hadoop集群及基本组件搭建
本人采用一个master和两个slave的网络结构,具体搭建如下 1.准备安装包 1.下载安装包 http://pan.baidu.com/s/1jIoZulw 2.安装包清单 scala-2.12. ...
- vs链接错误解决方法
常见引起链接错误的主要原因是由于项目不能找到所需的动态库的路径: 这里介绍一下引用第三方动态库的配置方法: 方法一: vs加载动态库需要先把动态库拷贝到exe所在文件夹,再修改项目属性: 链接器-&g ...
- Android P正式版即将到来：后台应用保活、消息推送的真正噩梦
1.前言 对于广大Android开发者来说,Android O(即Android 8.0)还没玩热,Andriod P(即Andriod 9.0)又要来了. 下图上谷歌官方公布的Android P ...
- Javascript高级编程学习笔记（16）—— 引用类型（5） Function类型
JS中许多有趣的地方都和函数脱不了联系 那么是什么让JS中的函数这么有趣呢? 我们一起来看看吧 Function类型 在JS中函数实际上就是对象,每个函数都是Function类型的实例,和JS的其他引 ...