web前端 --- CSS（1）

文章列表

web前端 --- CSS（1）

CSS（Cascade Style Sheet） --- 级联样式表（1）

<head><style>选择器{属性名：属性值;属性名：属性值;}</style>
</head>属性名：修饰对象的属性（样式）
属性值：样式的取值

1、书写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>css书写样式</title><style>@import url();/* 在html中也可写入import,只不过外部必须添加style标签 */</style><!-- 使用link标签，引入需要的css文件 --><link rel="stylesheet" href="css/a.css"><!-- rel不可省略，类名必须为stylesheet，表示引入的为层叠样式表。href：路径 --></head>
<body><div style="color:red;font-size: 20px;">这是一个div</div><!-- 行内样式，优先级高，绑在标签上一般无法被覆盖。优点：该标签独一无二；缺点：批量修改较为麻烦 --><!-- style：当前标签的样式. --><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div></body>
</html>

2、CSS选择器

（1）基本选择器

id选择器：通过标签的id名称来选择标签（# id）
类选择器：class选择器，选择一个类别（.classname）
标签选择器：tagname直接选择标签
逗号选择器：复合选择器
通配符（*）选择器：匹配所有标签

例：

<!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>css的基本选择器</title><style>*{/* 通配符选择器（*）：匹配所有标签 */margin: 0;padding: 0;/* 向左无空格。适合通用设置，不适合独立设置 */}#box{width: 200px;height: 100px;border: 1px solid rgb(237, 20, 20);}.msg{width: 100px;height: 50px;border: 2px solid blue;}.msg-2{border: 3px solid rebeccapurple;}ul,ol{list-style: none;}</style>
</head>
<body><h1>id选择器</h1><div id="box"></div><!-- 有时id不可复用，所以一般不可重复添加id，id一般适合页面中独一无二的，例如：搜索框 --><h1>类选择器</h1><div class="msg"></div><div class="msg"></div><div class="msg msg-2"></div><!-- css是少数允许用中划线命名的技术（驼峰法） --><div class="msg"></div><!-- 类选择器：class选择器。允许重复；允许出现多个 --><h1>标签选择器，逗号选择器</h1><ul><li>国内新闻1</li><li>国内新闻2</li><li>国内新闻3</li><li>国内新闻4</li><li>国内新闻5</li></ul><ol><li>国外新闻1</li><li>国外新闻2</li><li>国外新闻3</li><li>国外新闻4</li><li>国外新闻5</li></ol></body>
</html>

（2）包含选择器：

子代选择器：（>）父子关系
后代选择器：（空格）后代所有

<!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>包含选择器</title><link rel="stylesheet" href="css/reset.css"><style>ul.news{/* 选择其中的ul */border: 1px solid red;width: 200px;min-height: 50px;}ul.news>li{/* 子代选择器 */height: 50px;width: 200px;border: 1px solid red;}ul.news li{/* 后代选择器 */height: 50px;width: 200px;border: 1px solid red;}</style>
</head>
<body><ul class="news"><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li><ul><li>wishing1</li><li>wishing2</li><li>wishing3</li></ul></ul><!-- 一般常见复合元素出现在类选择器和复合选择器中。 --><div class="news"></div>
</body></html>

@charset "utf-8";
html {background-color: #fff;color: #000;font-size: 12px
}body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, figure, form, fieldset, legend, input, textarea, button, p, blockquote, th, td, pre, xmp {margin: 0;padding: 0
}body, input, textarea, button, select, pre, xmp, tt, code, kbd, samp {line-height: 1.5;font-family: tahoma, arial, "Hiragino Sans GB", simsun, sans-serif
}h1, h2, h3, h4, h5, h6, small, big, input, textarea, button, select {font-size: 100%
}h1, h2, h3, h4, h5, h6 {font-family: tahoma, arial, "Hiragino Sans GB", "微软雅黑", simsun, sans-serif
}h1, h2, h3, h4, h5, h6, b, strong {font-weight: normal
}address, cite, dfn, em, i, optgroup, var {font-style: normal
}table {border-collapse: collapse;border-spacing: 0;text-align: left
}caption, th {text-align: inherit
}ul, ol, menu {list-style: none
}fieldset, img {border: 0
}img, object, input, textarea, button, select {vertical-align: middle
}article, aside, footer, header, section, nav, figure, figcaption, hgroup, details, menu {display: block
}audio, canvas, video {display: inline-block;*display: inline;*zoom: 1
}blockquote:before, blockquote:after, q:before, q:after {content: "\\0020"
}textarea {overflow: auto;resize: vertical
}input, textarea, button, select, a {outline: 0 none;border: none;
}button::-moz-focus-inner, input::-moz-focus-inner {padding: 0;border: 0
}mark {background-color: transparent
}a, ins, s, u, del {text-decoration: none
}sup, sub {vertical-align: baseline
}html {overflow-x: hidden;height: 100%;font-size: 50px;-webkit-tap-highlight-color: transparent;
}body {font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;color: #333;font-size: .28em;line-height: 1;-webkit-text-size-adjust: none;
}hr {height: .02rem;margin: .1rem 0;border: medium none;border-top: .02rem solid #cacaca;
}a {color: #25a4bb;text-decoration: none;
}

（3）属性选择器：根据元素的属性以及属性值来选择元素

书写方式：

[]
[属性]
[属性=“xxx”]
[属性*="xxx"]
[属性^="xxx"]
[属性$="xxx"]
......

例：

<!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>css属性选择器</title><style>/* [title]{color: red;} *//* div [title]{color: red;} 仅筛选出含div标签的title属性*//* div[title=" this is a title"]{color: #FF0000;} 筛选出中title在div标签中为指定内容的标签*//* 前三个用的较多 *//* div[title^="12"]{color: aqua;} 筛选出title属性在div标签中以指定内容开头的标签*//* div[title$=67]{color: chocolate;}筛选出title属性在div标签中以指定内容结尾的标签 */</style>
</head>
<body><div title=" this is a title">123456</div><div title="1234567">123456</div><div>123456</div><div>123456</div><div id="box">123456</div><p title>有title</p><p>无title</p>
</body>
</html>

（4）伪类选择器：添加选择器的特殊效果

（最先出现是为了装饰a标签诞生的）

anchor伪类

a:link {color:#FF0000;} /* 未访问的链接样式 */
a:visited {color:#00FF00;} /* 已访问的链接样式 */
a:hover {color:#FF00FF;} /* 鼠标划过链接样式 */
a:active {color:#0000FF;} /* 已选中的链接样式 */

例：

<!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>伪类选择器</title><style>.content{color:red;}a:link{color: aqua;text-decoration: none;/* 默认显示 */}a:hover{color: mediumaquamarine;text-decoration: underline;font-size: 21px;/* 不建议 *//* 光标移动到字符的显示 */}a:active{color: green;/* 光标点击字符未松开 */}a:visited{color: blueviolet;/* 光标点击字符后的显示 */}input:focus{background-color: brown;}</style>
</head>
<body><div class="content"><p>AzureC2Relay：AzureC2Relay是一个Azure功能，它通过基于Cobalt Strike</p><p>AzureC2Relay：AzureC2Relay是一个Azure功能，它通过基于Cobalt Strike</p><p>AzureC2Relay：AzureC2Relay是一个Azure功能，它通过基于Cobalt Strike</p><a href="#">链接1</a><a href="#">链接2</a><a href="#">链接3</a><!-- a标签不会继承父类的样式，需单独设置样式 --></div><input type="text" name="" id=""></body>
</html>

（5）兄弟选择器：+和~

+选择器：如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器
~选择器：查找某一个指定元素的后面的所有兄弟结点。

<!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>选择器</title><link rel="stylesheet" href="css/d.css">
</head>
<body><h1>+选择器</h1><div><p>1234567</p><p class="box">1234567</p><!-- <div>1234567</div> --><p>1234567</p><p>1234567</p></div><h1>~选择器</h1><div><P>567890</P><P class="bax">567890</P><P>567890</P><P>567890</P></div>
</body>
</html>

p.box{color: saddlebrown;
}
.box + p{color: crimson;/* +表示与下一个p标签，当下一个是别的标签时，无法选中 */
}
.bax ~ p{color: darkmagenta;/* 表示.bax后面所有所有p标签都被选中 */
}

（6）伪元素选择器：（::）

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。

例1：

<!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>伪类选择器</title><style>p::first-letter{text-transform: uppercase;}p::first-line{color: brown;}ul.news>li:first-child{color: red;/* 第一个子元素，若第一个元素的类型不是li，则无法选中*/}ul.news>li:last-child{color: aqua;}ul.news>li:first-of-type{color: blueviolet;/* 第一个类型为li的子元素 */}.new>li:nth-child(1){color: #423232;}::placeholder{color: coral;}/* :root{选择文档的根元素，默认为根标签。与html{}等价} */::selection{/* 用于已选取的颜色部分 */color: mediumaquamarine;}</style>
</head>
<body><p>this is a book<ul class="news"><p>第一个子元素</p><li>12345</li><li>12345</li><li>12345</li><li>12345</li></ul></p><p>Cobalt Strike是一款超级好用的渗透测试工具，拥有多种协议主机上线方式，集成了提权，凭据导出，端口转发，socket代理，office攻击，文件捆绑，钓鱼等多种功能。同时，Cobalt Strike还可以调用Mimikatz等其他知名工具，因此广受技术大佬的喜爱。</p><p><input type="text" placeholder="输入用户名称" id=""></p><p><textarea placeholder="请输入建议或意见" id="" cols="30" rows="10"></textarea></p>
</body>
</html>

例2：

<!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>伪元素选择器</title>     <link rel="stylesheet" href="css/e.css">
</head>
<body><div class="box"></div><div></div><div></div>
</body>
</html>

.box{width: 100px;height: 200px;border: 1px solid red;
}
.box::before{content: "1"; /* 将行元素变成块元素 */display: block;/* block：块元素。inline：行内元素 */height: 200px;width: 50px;background-color: aqua;float: left;border-radius: 50%;/* 圆 */
}
.box::after{display: block;content: '2';background-color: blue;height: 200px;width: 50px;float: left;border-radius: 50%;
}

web前端 --- CSS（1）

CSS（Cascade Style Sheet） --- 级联样式表（1）

1、书写CSS

2、CSS选择器

（1）基本选择器

（2）包含选择器：

（3）属性选择器：根据元素的属性以及属性值来选择元素

（4）伪类选择器：添加选择器的特殊效果

（5）兄弟选择器：+和~

（6）伪元素选择器：（::）

相关问题

公告

标签