web开发：css基础
2024-06-04 19:48:00
一、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>转载于:https://www.cnblogs.com/wuzhengzheng/p/10273504.html
web开发：css基础相关推荐
- python web开发 CSS基础
文章目录 1. 基础知识 2. ID,Class 选择器 3. CSS盒子模型 4. 嵌入CSS样式 4.1 内联样式表 4.2 内部样式表 4.3 外部样式表 learning from <p ...
- JSP WEB开发入门基础到高手进阶教程002
JSP WEB开发入门基础到高手进阶教程 -------开发入门 JSP与微软的Active Server Pages 兼容,但它是使用类似HTML的卷标以及Java程序代码段而不是VBScript. ...
- WEB开发零基础到入门之HTML+CSS(学习记录)
序言 之前一直想把自己的一个学习记录,以文章形式记录下来,方便于自己后期查找和温故.自己想了想准备建个人博客站来做记录,但是又想到了csdn的大家庭:所以就放弃了用个人站记录的想法,关于这里简单说明下 ...
- python web开发 HTML基础
文章目录 1. 简介 2. 标签元素属性 3. 表格 4. 列表 ol 有序 ul 无序 自定义列表 5. 表单 输入域标记 input 选择域标记 select, option 文字域标记 text ...
- 移动web开发入门—基础知识、自适应布局、调试
之前没做过移动端web开发,最近接手的一个小项目是做微信公众号,需要考虑手机适配.UI给出的设计稿是一般是基于iphone手机做的(15年之后是基于ipone6),我们的UI是基于iphone6来做的 ...
- python web开发 jQuery基础
文章目录 1. 引入 jQuery 2. 基本语法 3. jQuery 选择器 3.1 元素选择器 3.2 #id 选择器 3.3 .class 选择器 4. jQuery事件 5. 获取内容和属性 ...
- python web开发 JavaScript基础
文章目录 1. script 标签 2. 字面量.变量 3. 数据类型 4. 运算符 5. if 条件 6. switch分支 7. for循环 8. while循环 9. break, contin ...
- Web前端开发CSS基础(2)
CSS 层叠样式表(英文全称:Cascading Style Sheets),是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不 ...
- Web前端开发css基础样式总结
颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255之间 一般都用16进制表示颜色 单 ...
- 前端开发--CSS基础
快速生成css样式 采用简写的方式即可 w200 tab键 width:200px:lh200 tab键line-height:200px:## web服务器免费的远程服务,免费空间 http://f ...
最新文章
- xhr请求python_python爬取boss直聘职位数据，并保存到本地
- 此任务要求应用程序具有提升的权限
- 记录安装php与apache不兼容的过程
- 请领导批阅文件怎么说_请领导吃饭，不要对外说，职场员工为何如此保密？
- HTTP协议－－请求与响应
- linux VM中复制虚拟机后eth0变成eth1
- 华成英-模拟电子技术P9 静态工作点的稳定 笔记
- 把网络图片URL转化为流
- Java八股文(高阶)背诵版
- python手机桌面开发_将Android手机打造成你的Python开发者桌面#华为云·寻找黑马程序员#...
- word文档设置不同的页眉页脚
- window10 下载速度限制问题解决方案
- 大一就开始这样刷题后，我成了同学们眼中的 offer 收割机
- java代码实现十进制到二进制的转化
- 飞浆领航团AI达人创造营第01课|让人拍案叫绝的创意都是如何诞生的？
- 3. Executors
- java签到断签重置_签到打卡功能，7天一个周期，中间断签重新开始
- 视频教程-使用Objective-C进行iOS移动开发-iOS
- 安装Citrix Workspace报错提示NET Framework 4.6.2 or late:Error Code:5100
- 检测RS232通讯线线序的方法