CSS笔记
来源:互联网 发布:免费网络主播色情表演 编辑:程序博客网 时间:2024/06/06 17:09
1 CSS标签
<head> <meta charset="UTF-8"> <title>div效果演示</title> <style> div{ border: 1px solid red; } </style> </head> <body> <div> Hello World! </div></body>
2 span标签
<head> <meta charset="UTF-8"> <title>span演示</title> <style> span{ font-size: 50px; } </style> </head> <body> <span> 吾虽浪迹天涯,却未迷失本心 </span> AAAA</body>
吾虽浪迹天涯,却未迷失本心 AAAA
3 选择器
1 元素选择器
<head> <meta charset="UTF-8"> <title>元素选择器</title> <style> div{ font-size: 30px; color: pink; } </style> </head> <body> <div> 犯我德邦者,虽远必诛!11 </div> <div> 犯我德邦者,虽远必诛!22 </div> <div> 犯我德邦者,虽远必诛!33 </div> <div> 犯我德邦者,虽远必诛!44 </div> <div> 犯我德邦者,虽远必诛!55 </div> </body>
2 类选择器
<html> <head> <meta charset="UTF-8"> <title>类选择器</title> <style> .div2{ font-size: 30px; color: gold; } </style> </head> <body> <div> 犯我德邦者,虽远必诛!11 </div> <div class="div2"> 犯我德邦者,虽远必诛!22 </div> <div> 犯我德邦者,虽远必诛!33 </div> <div class="div2"> 犯我德邦者,虽远必诛!44 </div > <div> 犯我德邦者,虽远必诛!55 </div> </body></html>
3 id选择器
<html> <head> <meta charset="UTF-8"> <title>id选择器</title> <style> #div5{ font-size: 30px; color: yellow; } </style> </head> <body> <div> 犯我德邦者,虽远必诛!11 </div> <div class="div2"> 犯我德邦者,虽远必诛!22 </div> <div> 犯我德邦者,虽远必诛!33 </div> <div class="div2" id="div5"> 犯我德邦者,虽远必诛!44 </div > <div id="div5"> 犯我德邦者,虽远必诛!55 </div> </body></html>
4 层级选择器
<head> <meta charset="UTF-8"> <title>层级选择器</title> <style> div p{ font-size: 20px; color: green; } </style> </head> <body> <div> 犯我德邦者,虽远必诛!11 </div> <div> 犯我德邦者,虽远必诛!22 </div> <div> 犯我德邦者,虽远必诛!33 </div> <div> <p> 犯我德邦者,虽远必诛!44 </p> </div> <div> <p> 犯我德邦者,虽远必诛!55 </p> </div> </body>
5 属性选择器
<head> <meta charset="UTF-8"> <title>属性选择器</title> <style> input[type='text']{ background-color: red; } input[type='password']{ background-color: blue; } </style> </head> <body> 用户名:<input type="text" name="username" /><br /> 密码:<input type="password" name="password" /> </body>
4 CSS引入方式
1 内部引入
<meta charset="UTF-8"> <title>元素选择器</title> <style type="text/css">/*如果我想要个多个相同内容*/ div{ font-size: 20px; color: pink; } </style> </head> <body> <div> 犯我德邦者,虽远必诛!11 </div> <div> 犯我德邦者,虽远必诛!22 </div> </body>
2 行内引入
<head> <meta charset="UTF-8"> <title>元素选择器</title> <style type="text/css"> div{ font-size: 30px; color: pink; } </style> </head> <body> <div style="font-size: 20px;color: blue;"> 犯我德邦者,虽远必诛!11 </div> <div> 犯我德邦者,虽远必诛!22 </div> </body>
3 外部引入
<head> <meta charset="UTF-8"> <title>元素选择器</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <div style="font-size: 20px;color: blue;"> 犯我德邦者,虽远必诛!11 </div> <div> 犯我德邦者,虽远必诛!22 </div> </body>
5 浮动
div{ font-size: 30px; color: pink; }
<head> <meta charset="UTF-8"> <title>CSS浮动</title> <style> #one{ border:1px solid red; width: 30px; height:15px; float: left; } #two{ border:1px solid blue; width: 30px; height:15px; float: left; } #three{ border:1px solid green; width: 30px; height:15px; float: left; } </style> </head> <body> <div id="one"></div> <div id="two"></div> <div id="three"></div> </body>
阅读全文
0 0
- css 笔记 --- css 属性
- CSS笔记
- css笔记
- CSS笔记
- CSS笔记
- CSS笔记
- css笔记
- CSS笔记
- CSS笔记
- css笔记
- css笔记
- css笔记
- CSS笔记
- CSS笔记
- css笔记
- css笔记
- CSS笔记
- CSS笔记
- ImageLoader的使用
- 架构师图谱
- 数组
- 为什么springMVC和Mybatis逐渐流行起来了?
- [算法]找出单链表中的倒数第k个元素
- CSS笔记
- Python 3 was configured to use ASCII as encoding for the environment 问题解决
- Unity 流程控制
- 数据库索引的作用和优点缺点
- Java基础之泛型
- numpy.tile
- Java进阶之虚拟机《一》:Java内存区域与内存溢出
- Kubernetes的基本概念说明
- 模拟实现C库的atoi和itoa——题集(二十三)