CSS基础
CSS基础
什么是CSS
CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。
通过使用 CSS 我们可以大大提升网页开发的工作效率！
CSS的四种导入方式
<!--内部样式-->
<styel>
h1{
color: aquamarine;
}
</styel><!--外部样式(html与css分离)-->
h1{
color: aquamarine;
}
<linke rel="stylesheet" href="css的路径"<!--行内样式-->
<h1 style="color: antiquewhite">我是标题</h1><!--@import-->
<styel>
@import url ("相对路径");
</styel>使用时遵循就近原则
选择器
选择页面上的某一个或某一类元素
标签选择器
h1{
color: aquamarine;
}会选择该html中所有的这个标签
类选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示：
<h1 class=color;>我是标题1</h1>
<h1 class=color;>我是标题2</h1>
<h1 class=demo;>我是标题3</h1>
css
.color{
color: aquamarine;
}
.demo{
color:antiquewhite;
}ID选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
<h1 id="test">我</h1>
<h1 id="test2">我</h1>
css
#test{
color: aquamarine;
}
#test2{
color:antiquewhite;
}class可以复用，ID不可以重复
优先级：id>class>标签
层次选择器
<head>
<style>
p{
background: #1007E0;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li><p>p4</p></li>
<li><p>p5</p></li>
<li><p>p6</p></li>
</ul>
</body>后代选择器
在上方style中替换
body p{
background: red;
}body 标签的后面所有该标签使用后代选择器
子选择器
在上方style中替换
body>p{
background: ;
}body 标签后一个标签使用
相邻选择器
在上方style中替换，将p1 class=active
.active+p{
background: #E52225;
}p1向下选择一个
通用选择器
.active~p{
background: #E52225;
}当前元素下的所有兄弟元素
结构伪类选择器
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>伪类：带冒号的就是伪类（条件判断）
ul下面的第一个 （first第一）
ul li:first-child{
background: red;
}ul下面的最后一个（last最后 ）（child孩子）
ul li:last-child{
background: red;
}p标签的父类选择当前的第一个元素（以元素顺序计）
p:nth-child(1){
background: red;
}以类型计
p:nth-of-type(1){
background: yellow;
}属性选择器
<style>
.demo a{
float: left;
display: block;
height: 50px;
width:50px;
border-radius: 10px;/*圆角*/
background: #2700ff;
text-align: center;/*文字居中*/
color: antiquewhite;/*文字颜色*/
text-decoration: none;/*去下划线*/
margin-right: 5px; /*外边距*/
font:bold 20px/50px Arial;/*bold加粗 第一个px字体大小 第二个px行高*/
}
a[id]{
background: #17B464;
}
a[id=wm]{
background:red;
}
</style>
</head>
<p class="demo">
<body>
<a href="http://www.baidu.com" class="links item first" id="first">l</a>
<a href="" class="links item active" target="_blank" title="test">2</a>
<a href="images/123.htm1" class="links item">3</a>
<a href="images/123.png" class="links item" >4</a>
<a href="images/123.jpg" class="links item">5</a>
<a href="abc" class="links item">6</a>
<a href="/a.pdf" class="links ite " >7</a>
<a href="/abc.pdf" class="links item">8</a>
<a href="abc.doc" class="links item">9</a>
<a href="abcd.doc" class="links item 1ast">10</a>
</p>
</body>将类选择器与ID选择器结合
a[id]{
background:#17B464;
}
/* =绝对等于 */
a[id=wm]{
background:red;
}
/* ^=以这个开头 */
a[href^=http]{
background: #400DEF;
}
/* $=以这个结尾 */
a[id$=m]{
background: #400DEF;
}
/* *=包含这个 */美化网页元素
span标签：突出文字
字体样式
<styel>
font-family:"方正粗黑宋简体";/*字体样式*/
font-weight: bolder； /* 字体粗细*/
</styel>文本样式
颜色
文本对齐方式
首行缩进
行高
......
行高和块的高度一致就可以本行居中
<styel>
h1{
color: red;
text-align: center; /*排版居中*/
text-indent: 2em; /*缩进*/
}
</styel> .l1{
text-decoration: line-through;//中划线
}
.l2{
text-decoration: overline;//上划线
}
.l3{
text-decoration: underline;//下划线
}
/* 去掉划线*/
text-decoration:none;超链接伪类
a:hover{
color:crimson;
font-size:50px;
}
a:active{
color: blue;
}背景
背景图片
border: 1px solid red;/*宽度，实线，颜色*/
background-image: url("aa.jpg");//默认平铺
background-repeat: repeat-x; //向x平铺
background-repeat: repeat-y; //向y平铺
background-repeat: none-repeat; //不平铺渐变
盒子模型
margin外边距离
使用外边距使得div块居中
magrin: 0 auto;padding内边距
border 边框
边框
粗细
样式
圆角边框
border-radius： 颜色
阴影
浮动和显示
块级元素：独占一行
行内元素（内联）：不独占一行
行内元素可以包含在块级元素内，反之不行
display
<style>
div{
width： 100px;
height: 100px;
border: 1px solid red;
}
span{
width： 100px;
height: 100px;
border: 1px solid red;
}
<div>块元素</div>
<span>行内元素</span>
块元素多大有多大，行不受块元素定义影响
使用display： 来更改属性
block 块元素 inline 行内元素 none
inline-block 是块元素但是可以内联
float
父级边框塌陷问题
clear: