先给自己打点鸡血
学习是一个不断累积的过程，对于知识点而言，不论晦涩难懂还是通俗易懂，所需要做的就是不断地重复重复再重复，很多的事是做了后才感觉简单的，做好笔记，一滴一滴慢慢积累
基本语法
CSS规则由两个主要部分构成：选择器以及一条或多条声明。每条声明由一个属性和一个值组成。属性(property)是设置的样式属性，每个属性有一个值，属性和值被冒号分开
比如： selector {property： value}
h1{color: red; font-size: 14px;}
h1 是选择器， color和font-size是属性， red和14px是值
多条声明用分号分开
创建CSS
创建css样式表分三种情况：
1）内部样式表
就是写在html文件内部
<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
div{width:200px; height:200px; border:1px solid red;}
</style>
</head>
2) 行内样式(内联样式)
写在标签内部
<div style="width:200px;height:100px;border:1px solid black;"></div>
3) 外部样式表(外链式)
将样式表写入在外部css文件中，通过link引入
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
注意： 样式优先级 内联 > 内部 > 外部
行内样式表 ：优点 书写方便；缺点 没有实现样式和结构相分离；使用情况 较少；控制范围 控制一个标签(少)。
内部样式表：优点 部分结构和样式相分离； 缺点 没有彻底分离；使用情况 较多；控制范围 控制一个页面(中)。
外部样式表：优点 完全实现结构和样式相分离； 缺点 需要引入；使用情况 最多，推荐；控制范围 控制整个站点(多)。
id和class 选择器
1）ID选择器
语法：
#id名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
2）Class选择器
语法：
.类名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
不同点:
● ID 选择器只能在文档中使用一次，而类选择器可以使用多次。
● 可以使用类选择器词列表方法为一个元素同时设置多个样式(也就是一个元素可以制定多个类名)，而ID只能指定一个。
元素选择器
语法：
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式
尝试一下
li {
margin: 0 12px;
width: 60px;
height: 60px;
border-radius: 6px;
background: rgb(64, 161, 241);
box-shadow: 0 4px 20px 1px rgba(64, 161, 241,.6);
}
CSS链接
链接的四种状态：
a:link - 正常，未访问过的链接。
a:visited - 已访问过的链接。
a:hover - 当鼠标滑动到链接上时。
a:active - 链接被点击的那一刻。
CSS列表
作用：设置列表项标记为图像修改列表项标记使用 list-style-type，使用图像作为标记可以利用 list-style-image 属性完成
CSS表格
表格边框： border
表格宽度和高度：width 和 height
表格对齐：text-align 和 vertical-align
表格内边距：tr,td的padding设置
CSS选择器
1）分组和嵌套选择器
- 分组选择器
例如：h1{color:gray;}
p{color:gray;}
可以写成：h1, p{color:gray;}
- 嵌套选择器
.div1 p{
color:white;
}
.div1 p a{
color:rgb(255, 174, 0);
font-weight:bold;
}
<div class="div1">
<p>嵌套选择器
<a href="#">深层嵌套选择器</a>
</p>
</div>
2) 通配符选择器
*{
padding:0;
margin:0;
}
3) 属性选择器
- 属性选择器：属性选择器使用[attr] ；例如：把所有带有 title 属性的元素的字体设置为橙色
<head>
<style>
[title]{
color:rgb(255, 123, 0);
}
</style>
</head>
<body>
<h1>h1 标题不带有 title 属性</h1>
<h2 title="标题">h2 可以设置样式</h2>
<a href="#" title="链接">超链接可以设置样式</a>
</body>
- 属性和值选择器：属性选择器使用[attr=value]
<head>
<style>
[title=Hello]{
color:rgb(54, 221, 12);
}
</style>
</head>
<body>
<h1 title="Hello world">h1 标题 title="Hello world"</h1>
<h2 title="Hello">h2 可以设置样式</h2>
<a href="#" title="Hello">超链接可以设置样式</a>
</body>
- 属性和多个值的选择器：使用有两种情况：属性值用空格分隔使用：[attr~=value]；属性值用连字符分隔则使用：[attr|=value]例如：把包含 title='Hello' 的元素的字体设置为绿色，使用 ~ 分隔属性和值
<head>
<style>
[title~=Hello]{
color:rgb(240, 198, 11);
}
[lang|=zh]{
color:rgb(238, 22, 202);
}
</style>
</head>
<body>
<h1 title="world">h1 标题 title="world"</h1>
<h2 title="Hello">h2 可以设置样式</h2>
<h3 title="Hello Web">h3 可以设置样式</h2>
<a href="#" title="Hello world">超链接可以设置样式</a>
<a href="#" lang="zh-TW">超链接可以设置样式</a>
</body>
- 表单样式：属性选择器在为不带有 class 或 id 的表单设置样式时特别有用。例如：
<head>
<style>
input[type="text"]{
width:250px;
height: 34px;
display:block;
margin-bottom:5px;
background-color:rgb(255, 166, 0);
}
input[type="button"]{
width:120px;
height: 30px;
margin-top:5px;
background-color:rgb(30, 226, 30);
}
</style>
</head>
<body>
<form name="input" action="demo.php" method="get">
用户名：<input type="text" name="user" placeholder="请输入登录名">
昵 称：<input type="text" name="name" placeholder="请输入角色名">
<input type="button" value="查询">
</form>
</body>
4) 组合选择器
● 后代选则器:又称为包含选择器，以空格分隔，子元素选择器只能选择作为某元素子元素的元素。
● 子元素选择器:子元素选择器只能选择作为某元素子元素的元素，以 > 分隔，子元素选择器只能选择作为某元素子元素的元素。
● 相邻兄弟选择器：可选择紧接在另一元素后的元素，且二者有相同父元素，以 + 分隔。
● 普通相邻兄弟选择器：选取所有指定元素的相邻兄弟元素，以 ~ 分隔。
● 选择器组合：多种选择器可以结合起来使用。
相邻兄弟选择器
li + li {
background: rgb(102, 116, 245);
box-shadow: 0 4px 20px 1px rgba(102, 116, 245,.6);
}
普通相邻兄弟选择器
.active ~ li {
background: rgb(102, 116, 245);
box-shadow: 0 4px 20px 1px rgba(102, 116, 245,.6);
}
伪类
语法：选择器:伪类{attr:value;}
1)超链接伪类
在浏览器中，链接的不同状态都可以以不同的方式显示：
a:link{color:#FF0000;} /* 未访问的链接显示为红色 /
a:visited{color:#00FF00;} / 已访问的链接显示为绿色 /
a:hover{color:#FF00FF;} / 鼠标划过链接显示为紫红色 /
a:active{color:#0000FF;} / 已选中的链接显示为蓝色 */
2) :first-child伪类
<body>
<p>第一个 p 元素</p>
<p>第二个 p 元素</p>
<p>第三个 p 元素</p>
</body>
选择作为任何元素的第一个子元素 p。选择器使用 p:first-child
选择所有 p 元素中的第一个子元素 b。选择器使用 p>b:first-child
选择所有作为第一个子元素 p 中的所有 b 元素。选择器使用 p:first-child b
li:first-child {
background: rgb(102, 116, 245);
box-shadow: 0 4px 20px 1px rgba(102, 116, 245,.6);
}
3) :lang伪类
使用 :lang 伪类可以为不同的语言定义特殊的规则：
html:lang(zh-CN){
color:blue;
}
:lang(en)>p{
color:gray;
}
伪元素
1) :before 伪元素
h1:before{
content:url(images/logo.gif);
}
2）:after 伪元素
h1:after{
content:url(images/logo2.gif);
}
content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容，该属性用于定义元素之前或之后放置的生成内容。
content 的内容一般可以为四种：
● content:none 该值是默认值，不插入内容。
● content:"string" 插入文本。
● content:attr(属性) 插入标签属性值。
● content:url(路径) 使用指定的绝对或相对地址插入一个外部资源，可以是图像，音频，视频或浏览器支持的其他任何资源。
网友评论