Web前端 CSS3 01
2024-04-17 06:27:28
CSS 介绍
网页 分为 三个部分结构 HTML表现 CSS行为 JavaScriptCSS 层叠样式表网页实际上是一个 多层结构通过CSS 为网页每一层 设计样式我们最终 只能看到 网页 最上层
CSS 实例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 网页 分为 三个部分结构 HTML表现 CSS行为 JavaScriptCSS 层叠样式表网页实际上是一个 多层结构通过CSS 为网页每一层 设计样式我们最终 只能看到 网页 最上层--><p style="color: red;font-size: 60px;" >少小离家老大回，乡音无改鬓毛衰</p>
</body>
</html>
使用同一网页所有 p标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 将 所有p 标签设为 绿色 60pixel */p{color: green;font-size: 60px;}</style>
</head>
<body><p style="color: red;font-size: 60px;" >少小离家老大回，乡音无改鬓毛衰</p><!-- 但是这个标签 只能 用p里面的每次新建 都需要自定义 --><!-- 升级方式将样式编写到 head中的 style去 --><p> Today is a good weather!</p></body>
</html>
可以将CSS样式编写到一个外部的CSS文件中， 然后通过link标签来引入外部的CSS文件
这样做 也会 加快网页加载速度，提高用户体验。
CSS 基本语法
分为 选择器 和 声明块
选择器： 选中页面中指定元素
p 选中页面中所有p元素
声明块： 通过声明块
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- style里面是css区域遵守css语法规则不是html了--><style>
/* CSS基本语法：选择器 selection声明块 选择器： 选中页面中指定元素p 选中页面中所有p元素声明块： 通过声明块
*/p{color: rebeccapurple;font-size: 40px;}h1{color: #000;}</style><link rel="stylesheet" href=".style.css">
</head>
<body><h1>I am H1</h1><p> Today is a good weather!</p><p> Today is a good weather!</p><p> Today is a good weather!</p><p> Today is a good weather!</p><p> Today is a good weather!</p><p> Today is a good weather!</p></body>
</html>
CSS选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 将 所有段落设置为红色元素选择器作用： 根据 标签名 选中 指定元素语法 标签名{}例子： p{}h1{}div{}*//* p{color: red;}title{color: blue;} *//* 如果只是 将其中某一句 变成红色 *//* id选择器作用：根据元素id属性值选中其中一个元素语法：id属性值例子：#box{}#red{}*/#red{color: red;}.blue{color: blue;}.abc{font-size: 20px;}/* 同配选择器作用： 选中页面中所有元素语法： **/</style>
</head>
<body><h1>i am title</h1><p>少小高家老大回</p> <p>乡音无改美毛豪</p> <p id="red">儿童相见不相识</p><!-- id 不可以重复使用class 可以重复使用可以为一个元素 指定多个class属性--><p>笑问客从何处来</p> <p class="blue abc">秋水共长天一色</p> <p class="blue">蒂霞与孤繁齐飞</p>
</body>
</html>
交集选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 将class为red元素设置为红色*/.red{color: red;}/* 交集选择器作用：同时符合多个条件的元素语法，语法：选择器1 选择器2 选择器3 选择器n()注意点：交集选择器中 如果有元素选择器，必须使用元素选择器起开头*/div.red{font-size: 30px;}.a.b.c{color: blue;}/* 并集选择器分组：同时选择多个选择器对应的元素*/h1,span{color: green;}</style>
</head>
<body><div class"red">我是div</div><p class="red">我是p元素</p><div class="a b c">我是div2</div><h1>title</h1><span>graph</span>
</body>
</html>
关系选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 为div的子元素span1 设置红色*//* 子元素选择器 */div > span{color: red;}/* 后代元素选择器 */div span{color: wheat;}div > span > div{color: red;}/* 兄弟元素选择器选择下一个兄弟*/p + span{color: blue;}</style>
</head>
<body><!-- 父元素 div 是p的 父元素子元素p 和 span2 是div的子元素 祖先元素父元素也是 祖先元素div是span1 后代元素子元素也是后代元素兄弟元素p和span2是兄弟元素--><div>i am a div<p><span>我是p中的 span1</span></p><span>我是div中的 span2</span></div><div><span> 我是span3</span></div><span> 我是span4</span>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* [属性名] 选择含有属性的元素[属性名=属性值] 选择还有指定属性值的 元素[属性名^=a] 选择以a开头的[属性名*=h] 选择只要包含h的就行*/p[title]{color: orange;}p[title=abc]{color: blue;}p[title^=a]{color: red;}p[title*=h]{color: green;}</style>
</head>
<body><h1>i am title</h1><p title="abc">少小高家老大回</p> <p title="abcdefg">乡音无改美毛豪</p> <p title="hello">儿童相见不相识</p><p title="he">笑问客从何处来</p> <p title="dfgdvb">秋水共长天一色</p> <p title="dfgdfg">蒂霞与孤繁齐飞</p>
</body>
</html>
伪类选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 将ul第一个li设置为红色使用伪类：描述一个元素的特殊状态第一个子元素被点击的元素鼠标移入的元素伪类一般情况下，都是使用:开头:first-typeeg: first-child 第一个子元素last-child 最后一个子元素nth-child(n) 第n个子元素2表示第2个n表示所有2n表示选择偶数为的元素2n+1表示奇数位置元素以上这些伪类 都是根据所有的 子元素进行排序的不区分类型frist-of-type{}not() 否定伪类选择所有，除了第三个，全变为黄色ul > li:not(:nth-child(3)){color: yellow;}*/ul > li:first-child{color: red;}ul >li:nth-child(2){color: blue;}ul > li:first-of-type{color: green;}</style>
</head>
<body><ul><li>first</li><li>second</li><li>third</li><li>forth</li><li>fifth</li></ul>
</body>
</html>
元素伪类
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* :link 表示没访问过的链接*/a:link{color: red;font-size: 50px;}/* :visited 表示访问过的链接*/a:visited{color: orange;}/* ：hover 表示鼠标移入状态Indicates that the mouse moves in*/a:hover{color: aqua;font-size: 50px;}/* 鼠标点击链接*/a:active{color: yellowgreen;}</style>
</head>
<body><!-- 访问过的链接和 没访问过链接 --><a href="https://www.baidu.com">hypterlink</a><br><a href="https://www.google.com">unvisited hypterlink</a><br><a href="https://www.youdao.com">hypterlink</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* :link 表示没访问过的链接*/a:link{color: red;font-size: 50px;}/* :visited 表示访问过的链接*/a:visited{color: orange;}/* ：hover 表示鼠标移入状态Indicates that the mouse moves in*/a:hover{color: aqua;font-size: 50px;}/* 鼠标点击链接*/a:active{color: yellowgreen;}/* 伪元素表示 页面中一些特殊并不存在的元素（特殊位置）::first-letter 表示第一个字母*//* 首字母下沉*/p::first-letter{font-size: 50px;}/* 第一行元素*/p::first-line{/* font-size: 50px; */background-color: yellow;}/* 选中内容变色*/p::selection{background-color: greenyellow;}/* ::before 元素开始::after 元素最后必须结合 content属性使用*/div::before{content: 'AAAAAAA ';color: red;}div::after{content:" BBBB";color: green;}</style>
</head>
<body><!-- 访问过的链接和 没访问过链接 --><a href="https://www.baidu.com">hypterlink</a><br><a href="https://www.google.com">unvisited hypterlink</a><br><a href="https://www.youdao.com">hypterlink</a><!-- 伪元素表示 页面中一些特殊并不存在的元素（特殊位置）::first-letter 表示第一个字母--><p><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. <br>Atque velit modi veniam nisi veritatistempore laborum nemo ipsa itaque optio. <br>Id odit consequatur molitia excepturi, minus saepe nostrum vel porro.</span></p><div>Hello Hello How are you</div>
</body>
</html>
继承
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 样式继承我们为一个元素设置的样式同时也会应用到它的后代元素上集成是 发生在 祖先 和 后代 之间的集成的设计 是为了方便 我们的开发背景相关的 布局相关的不会集成backgroud-color:--><style>p{color: red;background-color: orange;}div{color: blue;}body{font-size: 12px;}</style>
</head>
<body><p>我是一个p元素<span>我是p元素中的span</span></p><div>我是div<span>我是div中span <em>我是span中的em</em></span></div>
</body>
</html>
权重比较
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box1{color: blue;}div{color: yellow !important;}.red{color: red;}div#box1{color: aquamarine;}/* 样式冲突当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式冲突冲突时，由 选择器权重 决定选择器的权重内联样式 1000id选择器 100类选择器 10类 和 伪类选择器 1元素选择器 1通配选择器 0继承的样式 没有优先级比较优先级时，需要将所有选择器的优先级 进行相加计算最后优先级越高 则越优先显示如果优先级相同优先使用靠下面的在样式后面增加 !important 则该样式获得最高优先级*/</style>
</head>
<body><div id="box1" class="red";>我是一个div</div>
</body>
</html>
像素和百分比
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>html{font-size: 30px;}/* 长度单位像素 屏幕显示器的单位 实际上是由一个一个小点点构成的不同屏幕的像素大小是不同的，像素越小屏幕 显示的越清晰同样200px在不同设备下，显示效果不一样百分比百分比可以设置属性相对于 父元素属性的百分比设置百分比 可以 让 子元素 跟随 父元素改变而改变*//* em 参照自身 字体大小 = 20 * 字体（自身）大小rem 参照根元素的字体大小*/.box1{width: 200px;height: 200px;background-color: orange;}.box2{width: 50%;height: 50%;background-color: aqua;}.box3{font-size: 10px;width: 20em;height: 10em;background-color: greenyellow;}.box4{font-size: 10px;width: 20 rem;height: 20 rem;background-color: blueviolet;}</style>
</head>
<body><div class="box1"><div class="box2"></div></div><div class="box3"></div><div class="box4"></div>
</body>
</html>
颜色
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{width: 100px;height: 100px;/* 颜色单位：在CSS中可以直接使用 颜色名来设置各种颜色eg: red, orange, yellow, blue, green .......但是在css中直接使用颜色名 不是很方便RGB值： 通过三种不同的颜色不同浓度，调配颜色R red G green B blue每一种 浓度在 0 -255之间*/background-color: red;background-color: rgb(255, 0, 0);background-color: rgb(0, 255, 0);background-color: rgb(0, 0, 255);background-color: rgb(255,255,255);/* RGBA值：多一个参数，用来设置透明度 （0-1） 1 不透明 0 全透明0.5 半透明*/background-color: rgba(255,0,0,1);/* 十六进制RGB值：语法： 红绿蓝通过 00-ff00 最小ff 最大（相当于上面255）*/background-color: #ff0000;/* 如果是两位两位重复可以简写#ff0000#f00*/background-color: #f00;/* 豆沙绿 */background-color: #bfa;} </style>
</head>
<body><div class="box1"></div>
</body>
</html>
/* HSL值常用语工业设计H 色相 0 - 360(环)S 饱和度 颜色浓度 0 - 100%L 亮度 颜色亮度 0 - 100%
*/ background-color: hsl(1, 100%, 50%);
layout
东西摆放的位置
文档流
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{width: 100px;background-color: yellow;}.box2{background-color: red;}</style>
</head>
<body><!-- 文档流：normal flow网页是一多层的结构，一层摞一层通过css可以分别为每一个层来设置样式作为用户来说，只能看到最上层最下面一层 文档流，也是网页的基础我们所创建的元素，都在文档流中 排列我们的元素状态只有两个：在文档流不在文档流元素在文档流块元素 Block element页面中独占一行 Exclusive line on the page默认宽度 父元素的全部默认高度 内容撑开行内元素不会独占一行，只占自身大小如果一行不能容纳下之后，就自动换到第二行默认长宽度都是被内容撑开--><div class="box1">我是div1</div><div class="box2">我是div2</div><span>我是span1</span><span>我是span2</span><span>我是span3</span><span>我是span4</span><span>我是span5</span><span>我是span6</span><span>我是span7</span><span>我是span8</span><span>我是span9</span><span>我是span10</span><span>我是span11</span><span>我是span7</span><span>我是span7</span><span>我是span7</span><span>我是span7</span><span>我是span7</span><span>我是span7</span>
</body>
</html>
盒子模型 box model
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{/* 内容区 content：所有子元素都在内容区width 和 height设置内容区大小*/width: 200px;height: 200px;background-color: #bfa;/* 边框border盒子边缘三个样式：border-widthborder-colorborder-style边框大小 会 影响 盒子大小*/border-width: 10px;border-color: red;border-style: solid;}</style>
</head>
<body><!-- 盒模型 box modelCSS将页面中 所有元素 都设置为一个矩形的盒子将元素设置为 盒子后，对页面的布局 就是摆放盒子盒子组成：内容区content内边距 padding边框border外边距 margin--><div class="box1">div1</div>
</body>
</html>
边框属性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{/* 内容区 content：所有子元素都在内容区width 和 height设置内容区大小*/width: 200px;height: 200px;background-color: #bfa;/* border-width: 10px; *//* border-width制动四个方向 边框粗细默认 3px不写就是默认值*/border-width: 10px 20px 30px 40px;/* 上 右 下 左 *//* 还有一组 单独指定某一边border-top-widthborder-left-width*//* border-color: red; *//* 规则同上 */border-color: red yellow blue green;/* border-styple 指定边框样式solid 实线dotted 点状虚线dashed 虚线double 双线 *//* border-style: solid; */border-style: solid dotted dashed double;}</style>
</head>
<body><div class="box1">我是div1</div>
</body>
</html>
内边距border
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{width: 200px;height: 200px;background-color: #bfa;border: 10px orange solid;/* 内边距 padding内容区 和 边框之间距离 是内边距一共有四个方向的内边距pdding-toppading-rightpadding-bottompadding-left内边距 影响 盒子大小背景颜色 延伸 内容区盒子大小 内容区 内边距 边框 共同决定*/padding-top:100px;padding-left:100px;padding-right:100px;padding-bottom: 100px;/* padding 内边距的简写，可以同时指定四个方向的内边距规则和border-width 一样*/padding: 10px 20px 30px 40px;}.inner{width: 100%;height: 100%;background-color: yellow;}</style>
</head>
<body><div class="box1">hello<div class="inner"></div></div></body>
</html>
Web前端 CSS3 01相关推荐
- python进阶之web前端（01—HTML超文本标记语言）
目录 01.Web前端开发介绍 1.Web前端开发概述 2.Web起源 3.Web特点 4.Web工作原理 5.URL介绍 02.HTML网页结构 1.HTML基本结构 2.HTML文档类型 3.HT ...
- Web前端 font-awesome 图标组件(logo)使用
Web前端 css3引用图标组件font-awesome 使用场景 项目中使用 属性说明 示例下载 使用场景 Web前端页面开发需要引用图标素材时使用. Font Awesome 字体是可缩放矢量图标 ...
- 好程序员web前端技术之CSS3过渡
好程序员web前端技术之CSS3过渡,css3的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并圆滑地以动画效果改 ...
- Web前端开发——BAT面试题汇总及答案01
目录: 目录: HTML&CSS篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 2.每个 HTML 文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗? 3 ...
- 【Web前端学习系列01】—HTML
[Web前端学习系列01]-HTML HTML 基本标签-head head title标签 meta标签 link标签 style标签 script标签 base标签 文本 标题标签 h 段落标签 ...
- 小猿圈自学web前端之CSS3动画练习案例：用CSS3做个钟表
前段时间发的五子棋的游戏很多小伙伴都私聊让再做个,今天小猿圈web前端讲师为大家分享的是CSS3动画练习案例:用CSS3做个钟表,想玩的小伙伴记得自己运行一下呦. 自学CSS3属性之后,我们来用一个小 ...
- 好程序员web前端分享DIV+CSS3和html5+CSS3有什么区别
为什么80%的码农都做不了架构师?>>> 好程序员web前端分享DIV+CSS3和html5+CSS3有什么区别,不管是DIV+CSS3还是html5+CSS3,他们都是我们对 ...
- html隐藏元素的方式,Web前端：CSS3——3种隐藏元素方法的区别
原标题:Web前端:CSS3--3种隐藏元素方法的区别 Web前端教程 CSS3规范的一个新特点是被分为若干个相互独立的模块.一方面分成若干较小的模块较利于规范及时更新和发布,及时调整模块的内容,这些 ...
- 前端如何实现音乐盒胶盘的转动_干货来袭！web前端开发工程师必看之如何使用CSS3实现瀑布流效果?...
首先,我们来看一下什么是瀑布流布局效果,比如电商网站 蘑菇街 原理图: 在一个大盒子里,放置多个小盒子,小盒子的大小可以不一致,长短不一样,呈现一种瀑布流的效果. 使用CSS3S实现只需要如下4步: ...
最新文章
- 皮一皮：程序猿表示这点不够退休...
- socket编程 （PHP实现）
- mysql的基本数据类型_mysql基本数据类型(mysql学习笔记三)
- Mysql 必知必会(一)
- 黑客攻防：关于工业网络安全的那些事
- 使用 C-JDBC 给 Mysql 集群
- java字符串转json_java 字符串转成 json 数组并且遍历
- 使用mysql命令还原student表_自用mysql自带命令实现数据库备份还原的方法
- 想尝试搭建图像识别系统？这里有一份TensorFlow速成教程
- DevExpress 程序启动设置
- html post提交中文数据,HTML使用post方式提交中文内容出现乱码的错误解决方式
- dma和通道的区别_Java中IO和NIO的本质和区别
- scrapy如何指定生成python3的项目_python3+Scrapy爬虫实战（一）—— 初识Scrapy
- 学html和css的感受
- 九宫格日记：微博难越，前路漫漫
- 怎样设置rotacast插件_Revit插件|提取地形图上地形小插件（感觉一般，可以试试）...
- workbook对象需要关闭_jxl读取excel需要关闭Workbook？
- 腾讯art-template4，即vue后又获一利器
- ca42a_demo_c++_new_delete表达式
- 软件测试难不难？不是计算机专业也能学吗？