前端基础——CSS 选择器、网页美化
什么是CSS
- Cascading Style Sheet 层叠级联样式表
- CSS:表现和美化网页
字体，颜色，边距，高度，宽度， 背景图片，网页定位，网页浮动 - 发展史：
CSS1.0
CSS2.0： DIV（块）+CSS , HTML与CSS结构分离的思想，网页变得简单，SEO
CSS2.1: 浮动，定位
CSS3.0： 圆角，阴影，动画……浏览器兼容性
快速入门及CSS的优势
入门
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
h1{
color: blueviolet;
}
style>
head>
html与css分离：
h1{
color: blueviolet;
}
<head>
<meta charset="UTF-8">
<title>Titletitle>
<link rel="stylesheet" href="css/style.css">
head>
优势
1.内容和表现分离
2.网页结构表现统一，可以实现复用
3.样式十分丰富
4.建议使用独立于html的css
5.利用SEO，容易被搜索引擎收录
四种CSS导入方式（3种常用）
- 优先级：就近原则（最近的一定是行内样式，内部和外部样式看排列方式）
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
h1{
color: blue;
}
style>
<link rel="stylesheet" href="css/style.css">
head>
<body>
<h1 style="color: brown">我是标题h1>
body>
/*外部样式*/
h1{
color: yellow;
}
- 拓展：外部样式的两种写法
- 链接式（link）常用
- 导入式：
- 弊端：网页元素太多时会先展示框架再渲染
- 是CSS2.1特有的
<style>
@import url("css/style.css");
</style>
选择器——重要！
作用：选择页面上的某一个或一类元素
三种基本选择器
- 1.标签选择器：选择一类标签
- 2.类选择器 ：选中所有 class属性一样的标签，可以跨标签
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/* 类选择器的格式 .class的名称{}
好处：可以多个标签归类，是同一个class
*/
.qinjiang{
color: #67c23a;
}
.kuangshen{
color: mediumblue;
}
style>
head>
<body>
<h1 class="qinjiang">标题1h1>
<h1 class="kuangshen">标题2h1>
<h1>标题3h1>
<p class="qinjiang">我不是标题p>
body>
- 3.id选择器：全局唯一！！不要重复
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/*id选择器:id必须保证全局唯一！！！不建议重复使用
#id名称{}
*/
#qinjiang{
color: brown;
}
.style1{
color: blue;
}
h1{
color: #57a527;
}
style>
head>
<body>
<h1 id="qinjiang" class="style1">标题1h1>
<h1 >标题2h1>
<h1 class="style1">标题3h1>
<h1 class="style1">标题4h1>
body>
- 不遵循就近原则，有固定顺序
- id选择器>class选择器>标签选择器
层次选择器（四种）
html部分：
<body>
<p>p0p>
<p class="active">p1p>
<p>p2p>
<p>p3p>
<ul>
<li>
<p>p4p>
li>
<li>
<p>p5p>
li>
<li>
<p>p6p>
li>
ul>
- 1.后代选择器：在某个元素的后面的所有代
/* 后代选择器 body后面所有p标签 p1--p6*/
body p{
background: yellow;
}
- 2.子选择器：只有儿子这一代
/* 子选择器 body后面那一代里所有p标签 即只有p1,p2,p3*/
body>p{
background:green;
}
- 3.相邻（下）兄弟选择器：对下一个同辈（只有一个！！）
/* 相邻（下）兄弟选择器 即p2 */
.active+p{
background: black;
}
- 4.通用兄弟选择器：向下的所有同辈，即p2,p3
/* 通用兄弟选择器*/
.active~p{
background: blueviolet;
}
结构伪类选择器
- HTML代码同上
- 选择器代码：
/* ul的第一个 子元素 */
ul li:first-child{
background: #67c23a;
}
/* ul的最后一个 子元素 */
ul li:last-child{
background: yellow;
}
/*选中p1:定位到当前元素的父元素，
选择这个父级元素的第一个子元素（第一个子元素必须是与当前元素同类（p）的才生效）
不能顺延
*/
p:nth-child(1){
background: blue;
}
/*选中其父元素下的第2个p元素！！只要存在第2个p元素就能生效*/
p:nth-of-type(2){
background: brown;
}
属性选择器（常用）
通过属性甚至属性的值来选择元素
/*1[2]{} 存在2属性的1类型的元素*/
a[id]{
}
/*1[2=3]{} 存在2属性的值等于3的1类型的元素
*=表包含3
^=表示以3开头，
$=表示以3结尾*/
a[id="123"]{
}
美化网页元素
注意：要重点突出的内容，用span包起来
字体样式：
- 文字的字体、文字大小、颜色等属性
body{
/*字体 可以设置两种用逗号隔开，中英文分别应用两种*/
font-family: 楷体;
/*字体大小*/
font-size: 50px;
/*字体粗细*/
font-weight: bold;
}
/*也可一行设置多个属性：*/
p{
font: oblique bold 16px 楷体;
}
文本样式
- 背景颜色、对其方式、首行缩进、行距和装饰等
/*文字与图片居中对齐*/
a,b{
vertical-align: middle
}
body{
/*颜色color 可以#xxxxxx表示rgb颜色，或者直接颜色命
或者使用rgb()rgba()函数，后者多一个透明度参数*/
color: rgb(0, 0, 0);
/*排版：居中等*/
text-align: center;
/*首行缩进 em为一个字母位置*/
text-indent: 2em;
/*行高和块高，如果一样可以有上下居中的效果*/
height: 100px;
line-height: 100px;
/*上、下、中划线 设置划线颜色大多浏览器不支持
同时只能有一个划线，应该遵循覆盖的就近原则*/
text-decoration-color: #d60005;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
/*超链接去除下划线*/
text-decoration: none;
/*阴影 参数：阴影颜色，水平垂直偏移，模糊半径*/
text-shadow: black 5px 5px 1px
}
超链接伪类
- 让超链接在被选中或者点击等状态时，有不同的形态
/*正常显示*/
a{}
/*鼠标悬浮的状态*/
a:hover{}
/*鼠标悬浮未释放的状态*/
a:active{}
/*已访问的链接（点过链接紫色的样子）*/
a:visited{}