Web基础——CSS基础概念（2）
2024-04-20 04:18:36
目录
- 子选择器
- 相邻选择器
- 相邻所有选择器
- 属性选择器
- 其他的伪类选择器
- 页面定位
- 相对定位时设置元素的之间的间距
- 绝对定位设置间距
- 行标签块标签行内块标签对css样式的不同之处
- 行元素块元素行内块元素的转换
- 层的浮动
- 早期使用的表格来布局页面
- div和css来布局页面
子选择器
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#fu>h1 {color: red;}#fu2>h1 {color: yellow;}div h1 {background-color: gainsboro;}</style></head><body><div id="fu"><h1>阿斯顿发射点发大水</h1><h1>阿斯顿发射点发大水</h1><h2>22222222</h2></div><div id="fu2"><h1>阿斯顿发射点发大水</h1><h1>阿斯顿发射点发大水</h1><h2>22222222</h2><h2>22222222</h2></div></body>
</html>
相邻选择器
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#one {height: 200px;width: 200px;/* 边框：粗细，边框颜色，线条样式 solid 实线 */border: 1px black solid;background-color: #FF0000;}/* + 相邻选择器 */#one+div {height: 200px;width: 200px;/* 边框：粗细，边框颜色，线条样式 solid 实线 */border: 1px black solid;background-color: blue;}#one:hover +div{background-color:yellow;}</style></head><body><div id="one">1111</div><div id="two">2222</div></body>
</html>
相邻所有选择器
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#d1 {height: 200px;width: 200px;/* 边框：粗细，边框颜色，线条样式 solid 实线 */border: 1px black solid;background-color: #FF0000;}/* ~ 相邻所有选择器 */#d1~div {height: 200px;width: 200px;/* 边框：粗细，边框颜色，线条样式 solid 实线 */border: 1px black solid;background-color: blue;}#d1:hover ~div{background-color: #FFFF00;}</style></head><body><div id="d1">1111</div><div id="" class="mydiv">00000</div><div id="" class="mydiv">00000</div><div id="" class="mydiv">00000</div></body>
</html>
属性选择器
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/* 属性选择器 */[align] {color: red;}h1[align='left'] {background-color: green;}</style></head><body><h1 align="center">111111</h1><h1 align="left">111111</h1><h1 align="right">111111</h1></body>
</html>
其他的伪类选择器
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">p{font-size: 30px;font-weight: 900;}p::first-letter{font-size:50px;color: red;}p::first-line{background-color: #DCDCDC;}</style></head><body><p>像我这样优秀人的，本该灿烂过一生<br>像我这样默默无闻的人，世上还有多少人</p></body>
</html>
页面定位
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/* 页面的原点位置，在左上角，第一个元素，就会跑到原点位置页面元素默认使用的定位方式是相对定位相对定位：第一个元素在原点位置，后面的元素参数他前面的元素绝对定位：元素之前不参考，所有元素只参考原点位置。 */button{/* 元素的定位方式：relative 相对定位，默认值 absolute 绝对定位*/position:relative;}</style></head><body><button type="button">一个按钮</button><button type="button">两个按钮</button><button type="button">三个按钮</button></body>
</html>
相对定位时设置元素的之间的间距
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">div{position: relative;width: 200px;height: 200px;border: 1px black solid;}/* 相对定位：设置四个方向的间距margin-right: 20px;margin-top: 50px;margin-bottom: 200px;margin-right: 20px; */#d1{background-color: red;margin-left: 120px;}#d2{background-color: #0000FF;margin-top: 50px;margin-bottom: 200px;margin-right: 20px;}#d3{margin-top: 150px;background-color: #FFFF00;}</style></head><body><div id="d1">11111</div><div id="d2">2222</div><div id="d3">3333</div></body>
</html>
绝对定位设置间距
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">div{position: absolute;width: 200px;height: 200px;border: 1px black solid;}/* 绝对定位，设置元素距离原点位置：top:50px;left:100px;right: auto;bottom: auto;*/#d1{top:50px;left:100px;right: auto;bottom: auto;background-color: red;}#d2{top:80px;left:120px;background-color: #0000FF; }#d3{top:150px;left:200px;background-color: #FFFF00;}</style></head><body><div id="d1">11111</div><div id="d2">2222</div><div id="d3">3333</div></body>
</html>
行标签块标签行内块标签对css样式的不同之处
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/* 块标签，对设置上下左右的间距是生效的 */h1{margin-top: 50px;margin-left: 50px;}</style></head><body><!-- 行标签，设置上下间距不生效，设置左右间距是生效的。 --><b style="margin-left: 200px;margin-top: 500px;">这是个行标签</b><h1>这是个块标签</h1><!-- 行内块标标签:设置上下左右间距是生效的， --><button type="button" style="margin-left: 150px;margin-top: 500px;">按钮</button><button type="button">按钮</button><button type="button">按钮</button></body>
</html>
行元素块元素行内块元素的转换
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">h1{/* 把块元素，转换成行元素 */display: inline;}span{/* 把行元素，转换成块元素 */display: block;margin-top: 100px;}h2{/* 把块元素，转换成行内块元素 */display: inline-block;margin-top: 300px;}div{height: 300px;width: 300px;background-color:red;/* none 可以隐藏块元素 */display: none;}</style></head><body><h1>啊多发点是否</h1><h1>啊多发点是否</h1><span>asfasdfadsfasdf</span><h2>asdfasfasffsasddddddddddddddddddd</h2><div id="d1"></div></body>
</html>
层的浮动
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/* 浮动：可以使块标签，一字排开 float: left;*/#d1{height: 300px;width: 300px;background: red;float: left;}#d2{height: 300px;width: 300px;background: green;float: left;}#d3{height: 300px;width: 300px;background:yellow;float:left;}#d4{height: 300px;width: 300px;background:pink;}</style></head><body><div id="d1">111</div><div id="d2">222</div><div id="d3">333</div><!-- clear: left; 清除左浮动clear: both; 清除左右浮动--><div style="clear: both;"></div><div id="d4">444</div></body>
</html>
早期使用的表格来布局页面
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">body{margin-top: 0px;margin-left: 0px;margin-right: 0px;}</style></head><body><table border="0" cellspacing="0" cellpadding="" width="100%" height="40px"><tr><td width="300px"></td><td width="102px"><img src="img/logo.png"></td><td align="center" width="200px"><font size="5">西部开源欢迎你！</font></td><td width="280px"></td><td width="50px"><img src="img/phone1.png"></td><td width="200px">029-86699937 88262419</td><td width="300px"></td></tr></table><table border="0" cellspacing="0" width="100%"><tr><td><img src="img/linux.jpg" height="480px" width="100%" ></td></tr></table></body>
</html>
div和css来布局页面
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">body {margin-top: 0;}#tubu {width: 100%;height: 400px;border: 1px black solid;/* 背景图片 */background-image: url(img/linux.jpg);/* 背景图片尺寸 */background-size: 100% 100%;}#dh {width: 100%;height: 80px;margin-top: 10px;border: 1px black solid;}#zuo {width: 25%;height: 600px;border: 1px black solid;float: left;}#zhong {width: 40%;height: 600px;border: 1px black solid;margin-left: 5%;float: left;}#you {width: 25%;height: 600px;border: 1px black solid;float: right;margin-right: -2px;}#dibu {margin-top: 10px;width: 100%;height: 400px;border: 1px black solid;}#box {margin-top: 10px;}.btn {margin-top: 10px;height: 60px;width: 150px;border: 1px black solid;float: left;margin-left: 5.5%;/* 文本左右居中 */text-align: center;/* 文本上下居中：取值就是外框的高度 */line-height: 60px;/* 边框圆角 */border-radius: 5px;background-color: skyblue;color: white;font-size: 20px;box-shadow: 5px 5px 5px gray;}.btn:hover {font-size: 21px;}a:link {color: white;text-decoration: none;}a:hover {color: #0000FF;}</style></head><body><div id="tubu">Liger</div><div id="dh"><div class="btn"><a href="#">进入首页</a></div><div class="btn"><a href="#">学习原地</a></div><div class="btn"><a href="#">关于本站</a></div><div class="btn"><a href="#">学习资料</a></div><div class="btn"><a href="#">报名需知</a></div><div class="btn"><a href="#">联系我们</a></div></div><div id="box"><div id="zuo"><table border="0" cellspacing="0" width="100%" height="100%"><tr><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td></tr></table></div><div id="zhong">中</div><div id="you">右</div></div><div id="" style="clear: both;"></div><div id="dibu">底部</div></body>
</html>
Web基础——CSS基础概念（2）相关推荐
- 前端基础：html基础(css基础和JavaScript基础)/01/B/S网络结构，html文件结构，html标签格式，lt;bodygt;中的一些常用标记
前端基础:html基础(css基础和JavaScript基础)/01/B/S网络结构,html文件结构,html标签格式,<body>中的一些常用标记 html:超文本标记语言(非编程语言 ...
- python web开发 CSS基础
文章目录 1. 基础知识 2. ID,Class 选择器 3. CSS盒子模型 4. 嵌入CSS样式 4.1 内联样式表 4.2 内部样式表 4.3 外部样式表 learning from <p ...
- 前端web之CSS基础(2)
介绍 CSS用于设计风格和布局,是HTML页面美观. 比如,使用CSS来更改内容的字体.颜色.大小.间距,将内容分为多列,或者添加动画及其他的装饰效果. CSS语法 CSS 规则由两个主要的部分构成: ...
- web之CSS基础指南
css基本语法 css主要由两部分组成:选择器+一条或多条声明 选择器一般为要设置的html样式标签,声明为属性和值,属性之间用":"分隔. css中的注释以" /* & ...
- web前端---css基础
一.CSS技术 1.什么是CSS CSS全称叫做层叠样式表stylesheet,是用来修饰HTML网页的一门技术,增强网页的展示能力. 主要是使用CSS属性来实现,最终可以将css代码和HTML网页代 ...
- 从零开始学WEB前端——CSS基础
- web day03 CSS基本概念 选择器
一. CSS的基本概念 (使用CSS让单调的HEML网页更富表现力:文档体积小,便于搜索,可读性好 分层思想HTML+CSS 结构和表现分离 ,易于维护和管理) CSS的基本概念:CSS是层叠样式表( ...
- Html5 学习笔记 --》html基础 css 基础
HTML5 功能 HTML5特点 <!DOCTYPE html> <html lang="zh-cn"> <head><meta char ...
- HTML、css基础知识
typora-copy-images-to: media 第01阶段.前端基础.CSS初识 CSS层叠样式表 学习目标 理解 css的目的作用 css的三种引入方式 应用 css三种引用方式的书写 通 ...
- web编程技术基础---CSS
转载链接: https://www.baidu.com/link?url=J4xBnCADPUYpDI132XvKo2F9k49iKoskRJARTEMwySMBC5PRGXM6kYVJ_RATuOu ...
最新文章
- 【Android Protobuf 序列化】Protobuf 使用 ( protoc 编译器简介 | 下载 protoc 编译器 | 使用 protoc 编译器编译 .proto 源文件 )
- 【weblogic】部署jfinal编写的应用
- BZOJ2459 : [BeiJing2011]神秘好人
- 动态分配数组(new)和用随机数赋值（rand）
- Wget用法、参数解释的比较好的一个文章
- 13.JAVA之GUI编程将程序打包jar
- android窗口动画体系,Android 7.1 GUI系统-窗口管理WMS-动画的执行（七）
- unix与linux的区别_Linux与Unix：有什么区别？
- （13）FPGA面试题阻塞赋值与非阻塞赋值
- IOS 项目中遇到的问题
- [转]关于computer vision的会议及vision guys
- static RMQ
- caffe入门教程1-环境搭建
- 成功解决excel表格隐藏后右键全选列取消隐藏始终找不出来
- SpringBoot快速整合Quartz动态管理定时任务
- java 解压7z_实例展示使用Java压缩和解压缩7z文件的方法
- 《那些年啊，那些事——一个程序员的奋斗史》——25
- 【项目管理】软件项目经理述职报告
- Linux tar压缩和解压
- python IDEL 快捷键
热门文章
- windows不支持scp指令解决方案
- 小德，真的没想到，去年的千年德三子到现如今的现象级
- 服务器证书有问题苹果手机,iPhone应用程序中的“服务器证书不可信”错误
- android 获取alertdialog的view,Android开发实现AlertDialog中View的控件设置监听功能分析...
- 高等数学学习笔记——第五十四讲——向量的数量积、向量积和混合积
- 出家12年，北大数学天才柳智宇下山还俗：从事心理咨询，主动要求降薪至2万...
- Mysql学习日记：L13-distinct关键字
- ggplot画 ump 和tsne 从seurat中使用addmodule得到的umap 使用ggplot画图
- php urldecode 加号,php|urldecode urlencode 的加号问题
- Python3正则表达式：match函数