前端 day02 CSS
2024-06-08 21:57:52
目录
- CSS
- 1、代码的三种引入方式
- 2、CSS选择器
- 3、常用样式
- 盒子模型
- 1、内边距
- 2、外边距
CSS
1、代码的三种引入方式
（1）内联样式
（2）内部样式
（3）外部样式
/*外部的css文件*/
div{color: green;
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>写css代码的3种位置</title><!--css代码引入3种方式:1.内联样式方式(最不推荐，重用性不好)2.内部样式方式（老师上课使用，为了避免切换页面）3.外部样式方式（企业推荐方式，重用性最好）优先级: 就近原则--><!--2.内部样式位置特点: 写在style标签内部格式:<style>css代码</style>作用: 操作当前页面所有符合要求的标签元素备注：属性type="text/css"，含义是当前内容为文本的css代码，这个属性可有可无--><style type="text/css">div{color: blue;}</style><!--3.外部样式位置特点: css代码写在外部的css文件中,文件扩展名.css作用: 重用性好,所有页面只要引用外部的css文件都可以应用对应的样式使用步骤:1.创建css目录,在css目录下创建out.css文件,编写样式2.在当前页面引用外部的out.css文件语法:<link href="引用的外部css文件路径" type="text/css" rel="stylesheet">rel="stylesheet",含义引用的资源是样式表--><link rel="stylesheet" href="css/out.css"></head>
<body>
<!-- 1.行内样式位置(内嵌位置)特点:写在html标签内部,格式:style="", 只能操作当前一个标签
-->
<div style="color: red">天气不错</div>
<div>天气不错</div>
<div>天气不错</div>
</body>
</html>
2、CSS选择器
简单选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>4种基本选择器</title><style>/*基本选择器选择器介绍: 就是选着出要操作样式的所有标签进行控制样式分类1.通用选择器2.标签选择器3.类选择器4.ID选择器优先级固定: 通用选择器 < 标签选择器 < 类选择器 < ID选择器*//*1.通用选择器格式: *{样式名1:样式值1; ...}* 含义,操作所有标签, 只有这一个通配符*//*例如：操作所有标签字体颜色为红色*/*{color: red;}/*2.标签选择器格式:标签名{样式名1:样式值1; ...}作用:根据指定的标签名操作样式*//*例如：操作h2标签字体颜色为蓝色*/h2{color: blue;}/*3.类选择器格式:.类名{样式名1:样式值1; ...}以"."开头,类名是自定义,定义规范符合java的变量名,不能以数字开头步骤:1.定义类选择器2.在标签里面使用class="类名1 类名2 ..."作用:操作多个标签使用同样类名的选择器控制样式*//*例如：所有使用class="one"的标签的字体颜色为绿色*/.one{color: green;}/*4.ID选择器格式:#ID{样式名1:样式值1; ...}以"#"开头,ID必须是标签里面id属性的值, 每个标签的id值必须在当前页面是唯一步骤:1.定义ID选择器2.在标签里面使用id="值"作用:操作指定的唯一一个标签的样式*//*例如：设置标签id="two"的字体为黄色*/#two{color: yellow;}</style>
</head>
<body>
<h2>通用选择器</h2>
<p>我是一个段落</p>
<hr/><h2>标签选择器</h2><div>我是一个块级元素</div>
<hr/><h2 class="one">类选择器</h2>
<hr/><h2>ID选择器</h2>
<span class="one" id="two">我是内联元素</span>
<span class="one">我是内联元素</span>
<hr/></body>
</html>
选择器之间优先级
通用选择器 < 标签选择器 < 类选择器 < ID选择器
复合选择器
1.层级复合选择器 2.属性复合选择器 3.伪类复合选择器 4.并集复合选择器 5.交集复合选择器
层级选择器和属性选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*复合选择器介绍: 就是由多个基本选择器组成的分类1.层级复合选择器2.属性复合选择器3.伪类复合选择器4.并集复合选择器5.交集复合选择器优先级: 复合选择器的优先级遵循基本选择器的优先级, 优先级一样,下面的会覆盖上面的*//*1.层级复合选择器格式： 基本选择器1 基本选择器2 ...{样式名:样式值;...}作用：按照标签的层级选中元素操作样式特点：基本选择器之间使用空格隔开*//*例如：设置div标签里面的所有span标签的字体颜色为红色*/div span{color: red;}/*2.属性复合选择器格式1：基本选择器[属性名]{样式名:样式值;...} 操作含有属性名的指定元素样式格式2：基本选择器[属性名=属性值]{样式名:样式值;...} 操作含有属性名并且等于指定属性值的指定元素样式格式3：基本选择器[属性名1=属性值1][属性名2=属性值2]...{样式名:样式值;...}操作含有多个属性名并且等于指定属性值的指定元素样式格式4：[属性名]{样式名:样式值;...} 操作含有属性名的所有元素样式*//*例如1：操作所有p标签含有title属性的字体颜色为绿色*/p[title]{color: green;}/*例如2：操作所有p标签含有title="girl"属性的字体颜色为蓝色*/p[title='girl']{color: blue;}/*例如3：操作input标签type="text"并且name="username"的标签边框线:粗细10px solid实线 red红色*/input[type="text"][name="username"]{border:10px solid red;}/*例如4：操作所有标签含有title="boy"属性的字体颜色为黄色*/[title="boy"]{color: yellow;}</style>
</head>
<body>
<div><span>你好，美女！</span>
</div><span>你好，帅哥！</span>
<p title="girl">这是段落1</p>
<p title="man">这是段落2</p>
<div title="boy">这是块级元素</div>
<input type="text" name="username"> <br/>
<input type="text" name="age">
</body>
</html>
伪类、并集、交集选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>伪类、并集、交集选择器</title><style>/*复合选择器介绍：多个基本选择（标签，类，ID选择器）器组成的选择器1.层级选择器2.属性选择器3.伪类选择器4.并集选择器5.交集选择器优先级： 复合选择器的优先级根据基本选择器的优先级操作*//*伪类选择器介绍：根据指定标签元素的不同状态行为设置不同的样式状态1：正常状态，没有访问过， 状态名：link状态2：已访问过; 状态名：visited状态3：悬浮状态，鼠标悬浮到元素上，鼠标移到元素上;状态名:hover状态4：激活状态，正在使用鼠标点击这个元素；状态名：active格式： 基本选择器:状态名{样式名:样式值}注意：规定顺序必须先link\visited\hover\active，这个顺序不可以改变，否则效果出不来*//*例如1：a标签，没有访问过，设置字体颜色为绿色*/a:link{color: green;}/*例如2：a标签，已访问过，设置字体颜色为灰色*/a:visited{color: gray;}/*例如3：a标签，鼠标悬浮时，设置字体颜色为蓝色*/a:hover{color: blue;}/*例如4：a标签，鼠标点击的时候，设置颜色字体为红色*/a:active{color: red;}/*并集复合选择器格式： 基本选择器1,基本选择器2,...{样式名:样式值;}特点: 分隔符","作用： 标签元素只要符合其中任何一个基本选择器就可以设置样式*//*例如1：设置id=“two” 或 class="one"的标签元素字体颜色为红色*/#two,.one{color: red;}/*交集复合选择器格式： 基本选择器1基本选择器2...{样式名:样式值;}特点: 无分隔符作用： 标签元素需要符合所有基本选择器才会设置样式*//*例如1：设置标签为p并且class="one"的标签的字体大小为50px*/p.one{font-size: 50px;}</style>
</head>
<body>
<a href="#1">我是链接</a><br/>
<a href="#2">我是链接</a><br/>
<a href="#3">我是链接</a><br/>
<a href="#4">我是链接</a><br/>
<hr/>
<input type="text" name="username" id="username"><p id="two">第1段</p>
<p class="one">第2段</p>
<p>第3段</p>
</body>
</html>
3、常用样式
（1）背景样式
<style>div{width: 800px;height: 600px;border: 1px solid black;/*背景样式操作*//*例如1：背景色为绿色*/background-color: green;/*例如2：背景图片为 img/girl1.jpg */background-image: url("img/girl1.jpg");/*例如3：背景图片x轴平铺*/background-repeat: repeat-x;/*例如4：背景图片y轴平铺*/background-repeat: repeat-y;/*例如5：背景图片不平铺*/background-repeat: no-repeat;/*例如6：背景图片拉伸显示background-size: cover;*//*例如7：设置背景图片x轴向右移动50px(整数往右移动,负数往左),y轴向下移动100px(整数往下移动,负数往上)*/background-position: 50px 100px;/*例如8：设置背景图片居中位置显示*/background-position: center center;/*例如9：背景样式简写方式,顺序可以任意调整*/background: green url("img/girl1.jpg") no-repeat center center;}</style>
（2）文本样式和字体样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>初相遇</title><style>/*1. 诗放在div的层中id=content，宽400px，全文字体大小14px;2. 标题放在h1中。每段文字放在p中3. 标题文字大小18px，颜色#06F，居中对齐4. 每段文字缩进2em5. 段中的行高是22px6. "胸怀中满溢着幸福，只因你就在我眼前",加粗，倾斜，蓝色7. 最后一段，颜色#390; 下划线，鼠标移上去指针变化。8. 美字加粗，颜色color:#F36，大小18px;9. 文席慕容，三个字，12px，颜色#999，不加粗*//*1. 诗放在div的层中id=content，宽400px，全文字体大小14px;*/*{font-size: 14px;}#content{width:400px;}/*2. 标题放在h1中。每段文字放在p中*//*3. 标题文字大小18px，颜色#06F，居中对齐*/h1{font-size: 18px; /*字体大小*/color: #06F; /*字体颜色*/text-align: center; /*文本对齐方式*/}/*4. 每段文字缩进2em*//*5. 段中的行高是22px*/p{text-indent: 2em; /*段落文字缩进, em代表1个字符,所以这里是缩进2个字符*/line-height: 22px;}/*6. "胸怀中满溢着幸福，只因你就在我眼前",加粗，倾斜，蓝色*/.xiong{font-weight: bold; /*字体加粗*/font-style: italic; /*斜体*/color: blue;}/*7. 最后一段，颜色#390; 下划线，鼠标移上去指针变化。*/p:last-child{ /*最后1段*/color:#390;text-decoration: underline; /*下划线*/}p:last-child:hover{cursor: pointer; /*鼠标为手指效果*/}/*8. 美字加粗，颜色color:#F36，大小18px;*/.mei{font-weight: bold;color: #F36;font-size: 18px;}/*9. 文席慕容，三个字，12px，颜色#999，不加粗*/.wen{font-size: 12px;color:#999;font-weight: normal; /*不加粗*/}</style>
</head>
<body>
<div id="content"><h1>初相遇 <span class="wen">文/席慕容</span></h1><p><span class="mei">美</span>丽的梦和美丽的诗一样，都是可遇而不可求的，常常在最没能料到的时刻里出现。</p><p>我喜欢那样的梦，在梦里，一切都可以重新开始，一切都可以慢慢解释，心里甚至还能感觉到，所有被浪费的时光竟然都能重回时的狂喜与感激。<span class="xiong">胸怀中满溢着幸福，只因你就在我眼前</span>，对我微笑，一如当年。</p><p>我喜欢那样的梦，明明知道你已为我跋涉千里，却又觉得芳草鲜美，落落英缤纷，好像你我才初相遇。</p>
</div>
</body>
</html>
（3）边框样式
<style>#box {width: 200px;height: 200px;/*边框样式操作*//*例如1：分别设置边框线颜色为红色、粗细为10px、线的样式为实线solid*/border-color: red;border-width: 10px;border-style: solid;/*例如2：设置线的样式为虚线dashed */border-style: dashed;/*例如3：设置线的样式为双线double */border-style: double;/*例如4：设置边框圆角的半径为50px */border-radius: 50px;/*例如5：简写方式设置边框样式：粗细5px,线的样式为实线，线的颜色为绿色 */border: 5px solid green;}</style>
盒子模型
1、内边距
<style>#box {width: 200px;height: 200px;border: 1px solid black;/*盒子模型介绍:css将每个标签都看成一个盒子，盒子与盒子之间、盒子与里面内容之间都是有距离的，标签之间的嵌套就是盒子之间的嵌套。盒子模型的作用:通过设置盒子相关的距离，从而实现布局。分为内边距和外边距两种方式布局。*//*内边距操作布局：设置标签边框线到内容的距离*//*例如1：上内边距50px */padding-top: 50px;/*例如2：右内边距50px */padding-right: 50px;/*例如3：下内边距50px */padding-bottom: 50px;/*例如4：左内边距50px */padding-left: 50px;/*例如5：简写方式，同时设置上内边距50， 左右100px, 下150px*/padding: 50px 100px 150px;/*例如6：简写方式，同时设置上下内边距100， 左右150px */padding: 100px 150px;/*例如7：简写方式，同时设置上下左右内边距150px */padding: 150px;/*例如8：简写方式，设置上内边距50， 右100px, 下150px， 左200px*/padding: 50px 100px 150px 200px;}</style>
2、外边距
<style>#box {width: 200px;height: 200px;border: 1px solid black;/*盒子模型介绍:css将每个标签都看成一个盒子，盒子与盒子之间、盒子与里面内容之间都是有距离的，标签之间的嵌套就是盒子之间的嵌套。盒子模型的作用:通过设置盒子相关的距离，从而实现布局。分为内边距和外边距两种方式布局。*//*外边距布局操作:当前标签边框线到其他标签边框线的距离*//*例如1：上外边距50px */margin-top: 50px;/*例如2：右外边距50px */margin-right: 50px;/*例如3：下外边距50px */margin-bottom: 50px;/*例如4：左外边距50px */margin-left: 50px;/*例如5：简写方式，同时设置上外边距50， 左右100px, 下150px*/margin: 50px 100px 150px;/*例如6：简写方式，同时设置上下外边距100， 左右150px */margin: 100px 150px;/*例如7：简写方式，同时设置上下左右外边距150px */margin: 150px;/*例如8：简写方式，设置上内边距50， 右100px, 下150px， 左200px*/margin: 50px 100px 150px 200px;/*例如9：设置块级标签div在父元素中水平居中对齐块级标签特点：后面有一个换行*/margin: auto;}</style>
前端 day02 CSS相关推荐
- 好程序员HTML5前端教程-css的引入方式和选择器
好程序员HTML5前端教程-css的引入方式和选择器 01.引入css方式(重点掌握) 行内样式 内接样式 外接样式 3.1 链接式 3.1 导入式 css介绍 现在的互联网前端分三层: HTML:超 ...
- 前端基础-CSS的各种选择器的特点以及CSS的三大特性
一. 基本选择器 二. 后代选择器.子元素选择器 三. 兄弟选择器 四. 交集选择器与并集选择器 五. 序列选择器 六. 属性选择器 七. 伪类选择器 八. 伪元素选择器 九. CSS三大特性 一. ...
- 前端html,css基础总结
0.1.css引入界面的方式: 内联式:通过标签的style属性,在标签上直接写样式. <div style="width:100px; height:100px; backgroun ...
- canvas clear 指定属性的元素_好程序员web前端分享CSS属性组成及作用
好程序员web前端分享CSS属性组成及作用 学习目标 1.css属性和属性值的定义 2.css文本属性 3.css列表属性 4.css背景属性 5.css边框属性 6.css浮动属性 一.css属性和 ...
- Web前端基础---CSS样式--盒子模型--浮动与定位
Day02 CSS样式 DIV和CSS DIV是层叠样式表中的定位技术,全称DIVision,即为划分.有时可以称其为图层. DIV元素是用来为HTML文档内大块(block-level)的内容提供结 ...
- corners边框_第11天｜16天搞定前端，CSS的圆角边框，让人赏心悦目
有人可能会疑惑,我为什么专门用一节内容来说边框和圆角.其实,不为别的,只为它们在开发中,在Web系统中,在手机页面中,太常用了.有边框的页面,让人耳目一新,一目了然:有圆角的内容,让人赏心悦目,心旷神 ...
- 前端开发css禁止选中文本
在我们日常的Java web前端开发的过程中呢,程序员们会遇到各种各样的要求,所以不每天学的东西感觉自己都退步了,都更不上时代的发展了. 每天应对各种需求,每天活在疑问中就是我们程序员的真是写照.但我 ...
- 从零开始学前端：CSS复合选择器 --- 今天你学习了吗？（CSS：Day10）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS背景颜色 - 今天你学习了吗?(CSS:Day09) 文章目录 从零开始学前端:程序猿小白也可以完全 ...
- 从零开始学前端：CSS背景颜色 --- 今天你学习了吗？（CSS：Day09）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS字体属性和文本属性 - 今天你学习了吗?(CSS:Day08) 文章目录 从零开始学前端:程序猿小白 ...
最新文章
- c++switch实现猜拳_策略模式+简单工厂+注解消除 if-else/switch-case
- 你随便动幕布，投影跟不上算我输，动态投影黑科技，AE特效秒变成真
- HTTP FTP 返回状态代码
- 解决windows图片查看器背景色变成米黄色
- 如何美化linux终端输出
- 从DSSM语义匹配到Google的双塔深度模型召回和广告场景中的双塔模型思考
- 2016/09/16面试资料汇总
- c# 检测cpu使用率[测试通过]
- 层间距离对ct图像的影响_CT专业知识掌握基础、了解原理
- idea中的一个子模块中的pom文件带横线、maven为灰色
- MATLAB基础学习笔记01：初探MATLAB世界
- JavaEE Tutorials (7) - 在会话bean中使用异步方法调用
- Win10启用linux子系统(Linuxer福利)
- 织梦采集侠破解版_最新dedecms织梦采集侠v2.6破解版
- Python接口自动化测试实战系列02
- HTML上划线 中划线 下划线实现
- 使用Excel生成符合正态分布的随机数
- ISO 认证是哪三个？
- 吃鸡神器！新款苹果 iPad，免费送一台！
- 甲骨文最新改邮箱、改账户名、改密码教程