web开发：css基础
一、w3c架构分析
二、css三种引入
三、三种引入的优先级
四、基础选择器
五、长度单位与颜色
六、文件样式操作
七、display
一、w3c架构分析
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>架构分析</title>
</head>
<body>
<!-- 页面整体架构 -->
<div class="wraper">
<div class="header"></div>
<div class="nav"></div>
<div class="mian">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</div> <!-- box架构 -->
<!-- .box>(h2+p*2+h3) -->
<div class="box">
<h2>领先的 Web 技术教程 - 全部免费</h2>
<p>在 w3school，你可以找到你所需要的所有的网站建设教程。</p>
<p>从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP 和 ASP.NET。</p>
<h3>从左侧的菜单选择你需要的教程！</h3>
</div> <!-- .img-box架构 -->
<div class="img-box">
<img src="" alt="">
<div class="text">
<h2></h2>
<p></p>
<p></p>
</div>
</div>
</body>
</html>
二、css三种引入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css三种引入</title>
<!-- 内联式 -->
<style type="text/css">
/* css注释 */
/*选择器 p | 作用域 {} | 样式块*/
p {
width: 150px;
height: 150px;
background-color: red;
}
</style> <!-- 外联式 -->
<!-- 要将css文件与该html文件建立联系 => link -->
<!-- 相对路径(目标文件相对于本文件的位置 ./当前路径 ../上一层路径) | 绝对路径 -->
<link rel="stylesheet" href="./02.css">
</head>
<body>
<!-- css: 层级样式表, 完成页面布局 -->
<!-- 组成部分: 选择器 作用域 样式块 --> <!-- 1.行间式 -->
<div style="color: red">一段话, 将要被css修饰处理</div>
<!--
1. 样式书写在标签的style全局属性中
2. 样式格式为 => key: value(单位)
3. 以;隔开多个样式
4. 最后的;可以省略
--> <!-- 宽高背景颜色 -->
<div style="width: 200px; height: 200px; background-color: orange"></div> <!-- 2. 内联式 -->
<!--
1. 样式书写在head标签内的style标签中
2. 样式格式为 => 选择器 { 样式块 }
3. 样式块 => key: value(单位)
4. 以;隔开多个样式
5. 最后的;可以省略
-->
<p></p>
<p></p> <!-- 3.外连式 -->
<!--
1. 样式书写在外部css文件中,不需要写任何标签
2. 样式格式为 => 选择器 { 样式块 }
3. 样式块 => key: value(单位)
4. 以;隔开多个样式
5. 最后的;可以省略
-->
<h3></h3>
</body>
</html>
三、三种引入的优先级
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三种引入的优先级</title> <!-- 三种可以同时存在,协同完成布局 -->
<!-- 三种之间没有优先级之说,谁在逻辑下方(后解释的)谁就起作用(样式覆盖机制) -->
<!-- 行间式一定是逻辑最下方的 --> <!-- 外联 -->
<link rel="stylesheet" href="./03.css"> <!-- 内联 -->
<style type="text/css">
div {
width: 200px;
color: pink;
}
</style> </head>
<body>
<!-- 优先级: 大家同时存在且操作同一对象同一属性,才会出现冲突,最终起作用的就是优先级高的 -->
<!-- 行间 -->
<div style="background-color: cyan; color: orange">你是个好人</div>
</body>
</html>
四、基础选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
<style type="text/css">
/*div => 标签名 => 标签选择器: 开发过程中尽可能少的运用,运用范围为最内层的显示层*/
/*dd => class名 => 类选择器: 布局的主力军*/
/*d => id名 => id选择器: 一定为唯一的*/
/* * => 通配选择器 => html,body,body下所有用于显示内容的标签 */
/** {
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 {
background-color: red;
}
</style>
</head>
<body>
<!-- ***** -->
<!-- 选择器: css选择html标签的一个工具 => 将css与html建立起联系,那么css就可以控制html样式 -->
<!-- 选择器其实就是给html标签起名字 -->
<div></div>
<div class="dd"></div>
<div class="dd" id="d"></div> <div class="div"></div>
<div class="div red r"></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: orange;*/
/*background-color: rgb(255, 0, 255);*/
/*background-color: rgba(255, 0, 255, 0.5);*/
/*#abc == #AABBCC*/
background-color: #ff0;
}
</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: 900;
/*风格*/
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;*/
/*字划线: overline | line-through | underline */
text-decoration: overline;
/*字间距*/
letter-spacing: 2px;
/*词间距*/
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">123 12312 312312312312312312312312 3123123123123123123123123123123123123123123123123123123</div>
<hr>
<div class="wrap w2">hello world hello world</div>
<a href="">链接标签</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 | sup | sub | 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"></div>
<div class="box b2"></div>
<div class="box b3"></div> --> <div class="box b1">123</div>
<div class="box b2">456</div>
<div class="box b3">
<span>789 789 789 789</span>
<span>789 789 789 789</span>
</div>
</body>
</html>
web开发：css基础的更多相关文章
- Web开发——CSS基础
参考: 参考:http://css.doyoe.com/ 参考:http://www.w3school.com.cn/cssref/index.asp 参考:https://www.w3cschool ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- Web开发——HTML基础
文档资料参考: 参考:MDN官网 参考:http://www.runoob.com,W3School 参考:https://developer.mozilla.org/zh-CN/docs/Learn ...
- Web开发——HTML基础（图像、音频和视频内容）
参考: 参考:HTML中的图像 参考:视频和音频内容 目录: 1.HTML中的图像 1.1 我们如何在网页上放置图像? (1)替代文字(alt) (2)宽度和高度 (3)图片标题 1.2 用图形和图形 ...
- Web前端开发CSS基础
CSS 层叠样式表(英文全称:Cascading Style Sheets),是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不 ...
- Web前端开发css基础样式总结
颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值 ...
- Web开发——JavaScript基础
参考学习: MDN JavaScript:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript ECMAScript 6入门(阮一峰):htt ...
- Web开发——jQuery基础
参考: 参考W3School:jQuery 教程 参考:jQuery 参考手册 参考(常用):jQuery API 测试 JavaScript 框架库 - jQuery 测试 JavaScript 框 ...
- Web开发——HTML基础（HTML响应式Web设计 Bootstrap）
参考: 参考:http://www.bootcss.com/ 目录: 1.什么是响应式 Web 设计? 2.创建自己的响应设计 3.使用 Bootstrap 1.什么是响应式 Web 设计? RWD ...
- Web开发——HTML基础（高级文本格式 列表/style）
文档资料参考: 参考:https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_fo ...
随机推荐
- 终端复用器tmux基础使用
简介对于经常操作Linux系统的同学来说,远程连接Linux服务器使用最多的工具是SecureCRT或者Xshell,而将此时的环境称为终端环境.Tmux是两个单词的缩写,即“Terminal Mul ...
- Spring A 标签链接使用
1.示例 <a th:href="@{/edit/{id}(id=${user.id})}">修改</a> 以@开头前面的{id}是占位符,后面的(id=$ ...
- noi openjudge 6044：鸣人和佐助
http://noi.openjudge.cn/ch0205/6044/ 描述佐助被大蛇丸诱骗走了,鸣人在多少时间内能追上他呢? 已知一张地图(以二维矩阵的形式表示)以及佐助和鸣人的位置.地图上的每个 ...
- solr7.2.1+tomcat8.5.37+jdk8安装配置
软件下载 solr7.2.1:http://archive.apache.org/dist/lucene/solr/7.2.1/solr-7.2.1.tgz 注意是.tgz结尾的文件,而不是.zip ...
- js函数（2）
8.3函数的形参和实参 js中的函数并未指定函数形参的类型,函数调用也未对传入的实参值做任何类型的检查. 8.3.1函数的形参和实参 当调用函数时传入的实参比函数声明时指定的形参个数要少,剩下的参数都 ...
- Redis 学习笔记（篇十）：Sentinel
Sentinel(哨兵)是 Redis 的高可用解决方案:由一个或多个 Sentinel 实例组成的 Sentinel 系统可以监视任意多个主服务器,以及这些主服务器属下的所有从服务器,并在被监视的主 ...
- 提取json字符串中指定格式中的参数值
直接上代码: import java.util.ArrayList; import java.util.regex.Matcher; import java.util.regex.Pattern; p ...
- ARC083E. Bichrome Tree
A viable configuration of the given tree can be divided into two trees, each consists of vertices of ...
- （一）springMvc 底层运作流程
目录 什么是 springMvc SpringMVC的底层运作流程 什么是 springMvc springMvc 是spring 框架的一个模块,这也就意味着二者不需要通过整合层(整合包)进行整合 ...
- 15.Ansible安装与配置简单版
Ansible是一个简单高效的自动化运维管理工具,用Python开发,能大批量管理N多台机器,可以并发的在多台机器上部署应用.安装软件.执行命令.配置和编排任务. 一.Ansible工作机制 从图中可 ...