前端基础 CCS
CSS
层叠样式表 就是用来调节标签的样式
CSS注释
/*注释*/ /* 注释1 注释2 注释3 */ 注释的使用 css应该是一个独立的文件 /*这是小米首页的css样式文件*/ /*顶部导航条样式*/ /*侧边菜单栏样式*/
css语法结构
选择器{属性名:属性值;属性名1:属性值1;属性名2:属性值2;}
css三种映入方式
1.外部css文件(最正规的书写方式)
2.head内style标签内部直接书写css代码(也可以)
3.标签内部通过style属性直接书写对应的样式(不推荐)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- <link rel="stylesheet" href="ccs练习.css"> 变为草绿色--> <!-- <style>--> <!-- p{color: red;} 变为红色--> <!-- </style>--> </head> <body> <p style="color: orange">今天天气不错</p> </body> </html>
/*这是css练习文件*/ /*公共样式*/ p{ color:greenyellow; }
如何查找标签
基本选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*标签选择器 元素选择器*/ /*div { !*将页面上所有的div标签内部的文本变成红色*!*/ /* color: red;*/ /*}*/ /*类选择器 点号*/ /*.c1 { !*让所有具有c1类属性值的标签内部文本变成蓝色*!*/ /* color:blue;*/ /*}*/ /*id选择器 #号*/ /*#d1 { !*将id为d1的标签内部文本内容改成绿色*!*/ /* color: green;*/ /*}*/ /*!*通用选择器 *号*!*/ /** { !*页面上所有的标签统一修改样式*!*/ /* color: aqua;*/ /*}*/ </style> </head> <body> <div class="c1">你好 有什么需要帮忙的嘛 <span>我是div内部的span</span> </div> <p id="d1" class="c1">来宾三位 楼上请</p> <div>你好， 我能为你做什么</div> <span class="c1">小红过来接待下</span> <p>来宾三位 楼上请</p> <span id="d2">小黄去接待下</span> </body> </html>
组合选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 后代选择器 */ /*div span { !*空格表示div内部的span没有层级限制*!*/ /* color: red;*/ /*}*/ /* 儿子选择器 */ /*div > span { !*>表示div内部的儿子*!*/ /* color: green;*/ /*}*/ /* 毗邻选择器 */ /*div + span { !*紧挨着的下一个标签*!*/ /* color: red;*/ /*}*/ /* 弟弟选择器 */ /*div ~ span { !*同级别下面所有的标签,只算同级别的*!*/ /* color: deeppink;*/ /*}*/ </style> </head> <body> <span>div上面的span</span> <span>div上面的span</span> <div> <span>div内部第一个span</span> <p>div内部的p <span>div内部的p内部的span</span> </p> <span>div内部最后一个span</span> </div> <span>div下面的span</span> <span>div下面的span</span> <span>div下面的span</span> <span>div下面的span</span> <span>div下面的span</span> <span>div下面的span</span> <span>div下面的span</span> <div>弟弟救我 <p>我来舔你了</p> </div> <span>你会被我火火骚死</span> </body> </html>
属性选择器
所有的标签都可以有默认的属性
id
class
标签还可以有自定义的属性 并且可以有多个
<input type="text" username="jason" xxx="ooo">
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*属性选择器 [] */ /*[username] { !*找到页面上所有具有username属性名的标签*!*/ /* background-color: deeppink;*/ /*}*/ /*[username='jason'] { !*找到页面上属性名是username并且属性值叫jason的标签*!*/ /* background-color: black;*/ /*}*/ input[username="jason"] { /*找到页面上属性名是username并且属性值叫jason的input标签,input后不能有空格*/ background-color: aqua; } </style> </head> <body> <input type="text" username="jason"> <input type="text" username="sean"> <input type="text" username="owen"> <p username="tank">数据库的刷卡机大卡司</p> <div username="oscar">奥斯卡件打开拉随机端口两三点</div> <span username="jason">奥斯卡件打开拉随机端口两三点</span> </body> </html>
分组与嵌套
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*div {*/ /* color: red;*/ /*}*/ /*p {*/ /* color: red;*/ /*}*/ /*span {*/ /* color: red;*/ /*}*/ /*div ,p, span {*/ /* color: green;*/ /*}*/ /*.c1,#d1,p {*/ /* color: red;*/ /*}*/ /*.c1 h1{ !*找具有c1属性值的标签 后代的h1*!*/ /* color: green;*/ /*}*/ </style> </head> <body> <div class="c1">快要下课了 我好饿 好饿 好饿 我真的好饿 <h1>我是h标签</h1> </div> <span id="d1">快要下课了 我好饿 好饿 好饿 我真的好饿</span> <p>快要下课了 我好饿 好饿 好饿 我真的好饿</p> </body> </html>
伪类选择器
a链接标签
a标签默认的颜色是蓝色 但是只要你点过一次 就会变成紫色 浏览器会记住你有没有点过
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a:link { /*网址未被点击时*/ color: aqua; } a:hover { /*鼠标悬浮*/ color: black; } a:active { /*点击时*/ color: green; } a:visited { /*已访问过的*/ color: gray; } input:focus { /*选中输入框时*/ background-color: red; } </style> </head> <body> <a href="https://www.mzitu.com">点我1</a> <a href="https://www.luffycity.com">点我2</a> <a href="https://www.sogo.com">点我2</a> <a href="https://www.sajdkasd.com">点我2</a> <input type="text"> </body> </html>
伪元素选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*p:first-letter{color: red;font-size: 48px;} !*第一个今字*!*/ p:before{content: '哦哟';color: green} /*开头添加哦哟，不可选中*/ p:after{content: '?';color: blue;} /*结尾增加？，不可选中*/ </style> </head> <body> <p>今天天气不错</p> </body> </html>
