标签：color 开始 前端 元素 item font 选择器 CSS 样式
前端之CSS开始
CSS
html对应网页的结构，CSS则对应网页的样式和布局 —— 例如，更改内容的字体，颜色，大小和间距，将其拆分为多个列，或添加动画和其他装饰功能。
CSS 语法
选择器 {
属性:值;
}
selector {
property:value;
}
注意：选择器和声明都可以有多个（声明即 属性:值 ）。
<style>
p {
font-size: 3em;
}
</style>
宽高都变成了普通字体的三倍。
为HTML添加css
1.外部样式表
位置：在HTML文档的head标签内引入css文件
<link rel="stylesheet" href="路径（最好用相对路径）">
2.内部样式表
位置：直接放入head标签内的style标签里
<html lang="zh-Hans">
<head>
<title>css起步</title>
<style>
header p {
font-size: 3em;
}
</style>
</head>
</html>
3.内联样式
在对应元素内用style属性进行设置
<style>
<article>
<h2 style="color: blue; font-size: 2.5em;">好句积累</h2>
<ol start="a" style="color: red;">
<li>
一切命运的馈赠早已明码标价。
</li>
<li>
世间至理，等价交换。
</li>
<li>
一个教育家，即使是最蹩脚的教育家也绝不会让自己的学生收到半点伤害。
</li>
<li>
作为一教育家，我相信我的学生一定会是个好孩子。
</li>
</ol>
<p style="color: blue; margin-left: 350px;">
—— 一只爱吃萝卜的小兔子的积累
</p>
</article>
</style>
样式化 HTML 元素（改变元素样式）
取消列表元素的默认样式
选中元素，使用下面的命令，取消默认样式的样式表
<style>
li {
list-style-type: none;
}
</style>
元素选择器
即直接匹配 HTML 元素的选择器（空格是后代选择器）
style：
<style>
main article h2{
color: rgb(255, 1, 1);
}
main article p, main article ul li{
color: rgb(62, 230, 62);
}
</style>
<main>
<article>
<h2>I am a level one heading</h2>
<p>This is a paragraph of text. In the text is a span element and also a <a href="http://example.com/" target="_blank"><strong>link</strong></a>.</p>
<p>This is the second paragraph. It contains an <strong>emphasized</strong> element.</p>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item <em>3</em></li>
</ul>
</article>
</main>
类选择器
元素选择器会导致指定范围内的元素都一个样，也就是说元素选择器会改变一类元素样式。
如要指定某一个元素的样式，写个样式类，然后再给对应元素加上类选择器。
<style>
.one{
color:red;
font-size: 1.2em;
}
</style>
<ul>
<li>item 1</li>
<li class="one">item 2</li>
<li>item
<em>3</em>
</li>
</ul>
id选择器
文档内部的id都是唯一的。
<style>
#only {
/* 斜体 紫色 */
font-style: italic;
color: purple;
}
</style>
<p id="only">id 选择器</p>
选择器（符）种类
后代选择器——空格
在任意两个选择器之间加上空格。
<style>
/* 指定header标签内的p元素的样式 */
header p {
font-size: 3em;
}
/* 爷 父 孙 */
main article h2 {
color: rgb(255, 1, 1);
}
main article p,
main article ul li {
color: rgb(62, 230, 62);
}
</style>
子元素选择器——大于号
只能选亲儿子（孙子都不行）
<style>
/*
父>子
*/
main > article{
color: rgb(62, 230, 62);
}
</style>
相邻兄弟选择器——加号
选择紧接在第一个元素后的元素，而且二者有相同的父元素。（亲兄弟，不可以是堂兄弟）
既要相邻，又要有同一个爸爸
<style>
h1 + small{
color: rgb(73, 203, 255);
}
</style>
<header>
<h1>css起步</h1>
<small>作者：一只爱吃萝卜的小兔子</small>
</header>
<footer>
<small>© 一只爱吃萝卜的小兔子</small>
</footer>
如果把 h + 去掉，红框内的都会变为蓝色。
后续选择器——波浪线
选取所有指定元素之后的相邻兄弟元素（同级）。
<style>
ul~p{
background-color: yellow;
}
</style>
<ul>
<li>item 1</li>
<li class="one">item 2</li>
<li>item<em>3</em>
</li>
<li class="two">item 4</li>
</ul>
<p class="two">类选择器和元素选择器一起使用,对该元素中含有指定类的部分指定样式</p>
<p id="only">id 选择器</p>
根据标签的状态确定样式,
未访问的、访问过的、被鼠标悬停的（、被键盘定位的），亦或是正在被点击当中的状态，上一次点击的
<style>
/* 没有被访问过的 绿色*/
a:link{
color: green;
}
/* 访问过的 黄色*/
a:visited{
color: yellow;
}
/* 鼠标悬停的 取消修饰，字体改为黑色*/
a:hover{
text-decoration: none;
font-size: 1.2em;
}
/* 点击时 字体恢复原来大小 */
a:active{
font-size: 1em;
}
/* 上一次点击的————只在a标签中生效 */
a:focus{
color: red;
}
</style>
网页链接改变样式的时候，最好保持下划线，方便用户辨认。
网页实例
组合选择器
类选择器和元素选择器
定义一类样式，对该元素中含有指定类的部分指定样式
- 只有类选择器的情况下
<style>
.two{
font-size: 1.2em;
color: rgb(0, 59, 253);
}
</style>
<ul>
<li>item 1</li>
<li class="one">item 2</li>
<li>item<em>3</em></li>
<li class="two">item 4</li>
</ul>
<p class="two">p class="two"</p>
- 类选择器和元素选择器一起使用时：
<style>
li.two{
font-size: 1.2em;
color: rgb(0, 59, 253);
}
</style>
<ul>
<li>item 1</li>
<li class="one">item 2</li>
<li>item<em>3</em></li>
<li class="two">item 4</li>
</ul>
<p class="two">p class="two"</p>
选择器和选择符
<style>
body main article ul > li.two {
font-size: 1.2em;
color: rgb(0, 59, 253);
}
</style>
网页实例（Ctrl+U查看原码）
标签：color,开始,前端,元素,item,font,选择器,CSS,样式 来源： https://blog.csdn.net/weixin_46372074/article/details/123089128
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。