CSS基础
CSS
- 什么是CSS？
Cascading Style Sheet 层叠样式表
表现HTML文件样式的语言，因为单纯用HTML写出来的界面实在是太丑了，所以就有了CSS来美化它； - CSS的发展史
1996 CSS1.0；
1998 CSS2.0：融入了DIV+CSS的概念，提出了HTML结构与CSS样式表的分离；
2004 CSS2.1：融入了更多高级的用法，如浮动，定位等；
2010 CSS3.0：是目前最新的版本，加入了很多新的技术，比如字体，多背景，圆角，阴影，动画等高级属性。 - CSS的优点：
内容与表现分离；
网页的表现同意，容易修改；
丰富的样式，使页面局面更加灵活；
减少页面的代码量，增加网页的浏览速度，节省网络带宽；
运用独立于页面的CSS，有利于网页被搜索引擎收录； - 语法
选择器{
声明 1;
声明 2;
}
举个例子：
h2{
font-size: 120px;
color: blueviolet;
}
我们利用style标签来引入CSS：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
h1{
color: #ff7956;
}
h2{
font-size: 120px;
color: blueviolet;
}
style>
head>
<body>
<h1 style="color: blueviolet">郝一凡1h1>
<h2>郝一凡2h2>
body>
html>
效果如下
5. 引入CSS标签的几种方式
/* 1.行内样式*/
"color: blueviolet">郝一凡1
/*2.内部样式表*/
/*3.外部样式表*/
/*3.1 链接式*/
"stylesheet" href="../css/Style.css">
/*3.2导入式*/
链接式与导入式的区别：
- 标签属于XHTML，@import是属于CSS2.1；
- 使用链接的CSS文件先加载到网页当中，再进行编译显示；
- 使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页
当中； - @import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的；
6.基础选择器
6.1 标签选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<link rel="stylesheet" href="../css/Style.css">
<style>
/*标签选择器*/
span{
font-size: 10px;
color: blueviolet;
}
style>
head>
<body>
<span style="color: #ff7956" >
学习css的第一天
span>
body>
html>
效果如下：
6.2 类选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/*类选择器* .加类名称 属性属性值
意思就是所有class=a的标签 都要是这个样式 */
.a{
font-family: 宋体;
}
style>
head>
<body>
<p class="a">来西部开源p>
<a class="a" href="">成就IT梦想a>
<div class="a">郝一凡div>
<span class="a">coolspan>
<haoyifan>你好啊haoyifan>
body>
html>
效果如下：可以看出 你好啊 是没有class = a 这个属性的，所以它的字体没有变
6.3 id选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/*id属性全局唯一 不能同名*/
/* #id名字 */
#good{
font-size: 200px;
}
#aaa{
color: yellow;
}
style>
head>
<body>
<p class="a" id="aaa">1p>
<a href="">2a>
<div>3div>
<span class="a" id="good">4span>
body>
html>
效果如下：
6.4 基础选择器的优先级
id选择器 > 类选择器 > 标签选择器
基础选择器不遵循就近原则
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/*
id选择器 > 类选择器 > 标签选择器
*/
.test1{
color: #ff7956;
}
#test2{
color: blueviolet;
}
h1{
color: yellow;
}
style>
head>
<body>
<h1 class="test1" id="test2">郝一凡h1>
body>
html>
效果如下：
7. 高级选择器
7.1 后代选择器
body p{background: red}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/*所有选择器 逗号隔开*/
p,ul{
border: 1px solid red;
}
/*!* 后代选择器
使用body下的所有p标签 利用空格隔开*/!
body p{
background: seagreen;
}
style>
head>
<body>
<p class="aaaaaa" id="aaaa">1p>
<p>2p>
<p>3p>
<ul>
<li>
<p class="a">4p>
li>
<li><p>5p>
li>
<li>
<p>6p>
li>
ul>
<p>7p>
body>
html>
效果如下：
7.2 子选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/*所有选择器 逗号隔开*/
p,ul{
border: 1px solid red;
}
/* !*子选择器 只获得body下的第一层元素*!*/
body>p{
background: blueviolet;
}
style>
head>
<body>
<p class="aaaaaa" id="aaaa">1p>
<p>2p>
<p>3p>
<ul>
<li>
<p class="a">4p>
li>
<li>
<p>5p>
li>
<li>
<p>6p>
li>
ul>
<p>7p>
body>
html>
效果如下：
7.3 相邻兄弟选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/*所有选择器 逗号隔开*/
p,ul{
border: 1px solid red;
}
/*!*相邻兄弟选择器
定位到一个元素,获取制定元素的相邻兄弟元素 用加号
*!*/
#aaaa+p{
background: yellow;
}
style>
head>
<body>
<p class="aaaaaa" id="aaaa">1p>
<p>2p>
<p>3p>
<ul>
<li>
<p class="a">4p>
li>
<li>
<p>5p>
li>
<li>
<p>6p>
li>
ul>
<p>7p>
body>
html>
效果如下：
7.4 兄弟选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/*所有选择器 逗号隔开*/
p,ul{
border: 1px solid red;
}
/*兄弟选择器
指定元素的所有兄弟元素 下面的 因为是树状
*/
.aaaaaa~p{
background: aqua;
}
style>
head>
<body>
<p class="aaaaaa" id="aaaa">1p>
<p>2p>
<p>3p>
<ul>
<li>
<p class="a">4p>
li>
<li>
<p>5p>
li>
<li>
<p>6p>
li>
ul>
<p>7p>
body>
html>
效果如下：
8. 结构伪类选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/*
结构伪类选择器:
概念:伪元素和伪选择器
格式 选择器:伪元素{}
:first-child 第一个子元素
:last-child 最后一个子元素
*/
p,li{
border: 1px solid red;
}
ul li:first-child{
background: yellow;
}
ul li:last-child{
background: blueviolet;
}
/*看 body下的第二个元素是否是p元素 若是 则执行,不是 不执行
*/
p:nth-child(3){
background: #ff7956;
}
/*选择body下的第一个p元素*/
p:nth-of-type(1){
background: blue;
}
style>
head>
<body>
<div>fewdiv>
<p>1p>
<p>2p>
<p>3p>
<ul>
<li>l1li>
<li>l2li>
<li>l3li>
ul>
body>
html>
效果如下：
8. 属性选择器
a[id]{background: yellow;}/*有id属性的a标签 执行此代码块*/
a[id=first]{background: red}/*id属性=first的a标签 执行此代码块*/
a[class*=links]{background: red}/*class属性里面含有links的字符串的 links可以在任意位置 的a标签 执行此代码块*/
a[href^=https]{}/*href属性以https开头的a标签 执行此代码块*/
a[href$=png]{}/*href属性以png结尾的a标签 执行此代码块*/
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
a[class]{
font-family: "宋体";
font: bold;
font-stretch: expanded;
background: blue;
}
style>
head>
<body>
<a href="https:\\www.baidu.com" class="a">百度一下1a>
<a href="">百度一下2a>
<p>百度一下3p>
<p>百度一下4p>
<a href="https:\\www.baidu.com" class="b">百度一下5a>
body>
html>
效果如下，可以明显的看出有class 标签的 百度一下1和百度一下5 字体和背景颜色都发生了变化
"en">
"UTF-8">
Title
"https:\\www.baidu.com" target="_blank" class="a">百度一下1
"../html/1.png">百度一下2
"http:\\www.baidu.com">百度一下3
"freare">百度一下4
"http:\\www.baidu.com" class="b">百度一下5
效果如下：只有href以https开头的a标签 的背景是蓝色
