前端（二）之 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 ...
随机推荐
- 求N!的位数
#include<iostream> #include <cstdio> #include <cmath> using namespace std; const d ...
- tornadoの2
tornado之日记本—— 1.diary.py: import time from model.database import DataBase from tornado import we ...
- easyui 日期控件，选择日期小于等于当前日期，开始日期小于等于结束日期
转载出处:http://blog.csdn.net/u013755149/article/details/76613028 $(function(){ $('#start_date').datebox ...
- eclipse 工作区空格和回车键显示为乱码
eclipse 工作区空格和回车键显示为乱码 解决方法:Windows => Preferences => General =>Editors =>Text Editor =& ...
- 第一课：Python入门（笔记）
一.变量 1.什么是变量 #变量即变化的量,核心是“变”与“量”二字,变即变化,量即衡量状态. 2.为什么要有变量 #程序执行的本质就是一系列状态的变化,变是程序执行的直接体现,所以我们需要有一种机制 ...
- C#.NET开源项目、机器学习、Power BI
[总目录]本博客博文总目录-实时更新 阅读目录 1.开源Math.NET基础数学类库使用系列 2.C#操作Excel组件Spire.XLS文章目录 3.彩票数据资料库文章 4.数据挖掘与机器学习相 ...
- 在Docker容器中搭建MXNet/Gluon开发环境
在这篇文章中没有直接使用MXNet官方提供的docker image,而是从一个干净的nvidia/cuda镜像开始,一步一步部署mxnet需要的相关软件环境,这样做是为了更加细致的了解mxnet的运 ...
- SSM环境的搭建
回顾 首先创建新的项目,选择Maven管理我们的依赖 如图所示: 当然我是为了做列子,所以采用的中文, 然后选择自己的maven地址,这里稍微注意的是,Maven默认读取的是 .m2/setting. ...
- python 字典详细使用
1. 字典 字典是无序.可变序列. 定义字典时,每个元素的键和值用冒号分隔,元素之间用逗号分隔,所有的元素放在一对大括号“{}”中. 字典中的键可以为任意不可变数据,比如整数.实数.复数.字符串.元组 ...
- Javascript高级编程学习笔记（63）—— 事件（7）鼠标及滚轮事件
鼠标与滚轮事件 鼠标事件是web开发中最常用的一类事件,毕竟鼠标是最主要的定位设备 DOM3级事件中定义了9个鼠标事件: click:在用户单击主鼠标按钮(一般为鼠标左键)或者按下回车时触发,这一点对 ...