前端（二）之 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 ...
随机推荐
- python set所用后列表不改变里面内容排序
my_list = [1,2,1,54,5,64,4681,4,676] my_list_two = list(set(my_list)) my_list_two.sort(key = my_list ...
- web项目中对post请求乱码处理
<filter> <filter-name>characterEncoding</filter-name> <filter-class>org.spri ...
- EF学习笔记（七）：读取关联数据
总目录:ASP.NET MVC5 及 EF6 学习笔记 - (目录整理) 本篇参考原文链接:Reading Related Data 本章主要讲述加载显示关联数据: 数据加载分为以下三种 Lazy l ...
- day18_雷神_django第一天
# django_day01 1.http 协议 超文本传输协议,HTTP有很多应用,但最著名的是用于web浏览器和web服务器之间的双工通信. 协议概述 HTTP是一个客户端终端(用户)和服务器端( ...
- Tmux会话的使用
不想看废话的直接拖到下面看干货部分! 我们管理Linux服务器通常是通过ssh远程连接过去,如果在服务器上执行比较耗时的操作,比如下载安装软件.编译等等,如果需要数个小时来完成这些工作,但是又不得不关 ...
- 像纸质笔记本一样给div,textarea添加行的分割线
想要给textarea添加一个背景图来实现 但是背景图有几个问题, 1.每个div或者textarea的line-height不一样,对于每个不同的line-height都需要一个不同的背景图 2.当 ...
- 删除坏掉的 Active Directory Domain
最近公司的某个 Domain Controller 报告可能由于长时间没在线,同步失败,然后用 Repldiag 工具清理 lingering objects 的过程中,该工具报告存在 serious ...
- 包建强的培训课程（8）：iOS与设计模式
@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...
- Dubbo 源码分析 - 集群容错之 Router
1. 简介 上一篇文章分析了集群容错的第一部分 -- 服务目录 Directory.服务目录在刷新 Invoker 列表的过程中,会通过 Router 进行服务路由.上一篇文章关于服务路由相关逻辑没有 ...
- UglifyJs打包压缩问题引起的思考
问题背景 最近做了一个webapp项目,qa用手机测试功能时,在iphone6plus上表现是白屏,其他手机目测是ok的:因为之前在测试其他项目时也发现在这个iphone6上表现与其他手机不太一样.于 ...