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 ...
随机推荐
- iOS-MMDrawerController的使用【抽屉视图+（SUNSlideSwitchView）进度条手势滑动】转
下载网站:https://github.com/mutualmobile/MMDrawerController 首先,到下载网址下载MMDrawerController,将文件导入工程,里面有: MM ...
- Flutter之Dio引入和简单的Get/Post请求
先在pubspec.yaml中引入Dio包如图所示 认识Dio库:dio是一个dart的 http请求通用库,目前也是大陆使用最广泛的库,国人开发,完全开源. flutter的插件包管理:学了引入di ...
- imregionalmax imregionalmin imextendedmax imextendedmin imhmax imhmin 函数的详解 matlab中函数
BW = imregionalmax(I): 该函数获得灰度图像 I 的局部极大值,返回值BW为和原图像大小相同的二值图像,BW中元素1对应极大值,其他元素为0 BW = imregionalmax( ...
- 360再报丑闻，派遣黑客盗取ESET安全软件病毒库，法院已经介入调查
360再报丑闻,派遣黑客盗取ESET安全软件病毒库,联合法院已经介入调查.360于2019/3/10日通过非法途径试图盗取ESET安全软件100MB的病毒库,ESET立即反抗,360黑客电脑立即崩溃, ...
- 【ARM-Linux开发】wubi.exe安装Ubuntu14.04出现为/检查磁盘时发生严重错误的解决方法
原文:http://jingyan.baidu.com/article/0aa22375bbffbe88cc0d6419.html 我写过一篇叫做 如何硬盘装麒麟系统 的经验,介绍了如何不使用优盘的情 ...
- 使用请求包装器RequestWrapper 对博客内容进行编码
1.写一个文章类 代码如下 package model; public class article { private int id; private String title; private St ...
- 34.TCP非阻塞连接及套接字异常处理丶端口扫描脚本
TCP非阻塞及套接字异常处理: TCP阻塞套接字异常捕获: 套接字创建失败,8000 socket.error 客户端连接错误: ConnectionRefusedError socket.gaier ...
- [LuoguP2159][SHOI2009]舞会_动态规划_高精度_排列组合
舞会 题目链接:https://www.luogu.org/problem/P2159 数据范围:略. 题解: 不会.... 看了题解觉得自己好傻逼啊
- CSS3伪类与伪元素的区别及注意事项
CSS中伪类与伪元素的概念是很容易混淆的 今天就来谈谈伪类与伪元素之间的区别 定义 首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的 伪类:用于向某些选择器添加特殊的效果 伪元素:用于将特 ...
- *#【Python】【基础知识】【模块】【datetime】【使用datetime模块 】
datetime模块 的介绍: 用于调取时间.日期 datetime包含的 方法: >>> dir(datetime) ['MAXYEAR', 'MINYEAR', '__built ...