什么是css
Cascading Style Sheets（层叠样式表）
css：表示美化网页
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动
css发展史
css1.0
css2.0 div（块）+css，html与css结构分离的思想，网页变简单，CEO（收搜引擎）
css2.1 浮动，定位
css3.0 圆角，阴影，动画，浏览器兼容性
快速入门
style 写样式（风格）
html和css分离要引用
<linke rel="stylesheet" href="css的路径"style
background：背景样式（可以用图片当中背景样式） back（背部）round（地面）
border-radius：20px；圆角
font-size：80px；字体大小 size（大小）
样式
行内样式
<h1 style="color: antiquewhite">我是标题</h1>内部样式
<styel>
h1{
color: aquamarine;
}
</styel>外部样式
h1{
color: aquamarine;
}
优先级：就近原则！
基本选择器
语法：
选择器{
声明1;
声明2;
}
1，标签选择器
2，ID选择器（id）
3，类 选择器（class）
标签选择器(它会选择这个html的所有这个标签)
h1{
color: aquamarine;
}
ID选择器
<h1 id="test">我</h1>
<h1 id="test2">我</h1>
css
#test{
color: aquamarine;
}
#test2{
color:antiquewhite;
}
类选择器class 可以复用可以多个同名的class
<h1 class=color;>我是标题1</h1>
<h1 class=color;>我是标题2</h1>
<h1 class=demo;>我是标题3</h1>
css
.color{
color: aquamarine;
}
.demo{
color:antiquewhite;
}
优先级：id>class>标签
层次选择器
后代选择器：在你后边的元素（body标签下的p标签全部选中）
<style>
body p{
background: #1007E0;
}
</style>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<ul>
<li><p>4</p></li>
<li><p>5</p></li>
<li><p>6</p></li>
</ul>
</body>子选择器 儿子（body下面的p标签第一段p）
<style>
body>p{
background: #1007E0;
}
</style>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<ul>
<li><p>4</p></li>
<li><p>5</p></li>
<li><p>6</p></li>
</ul>
</body>相邻兄弟选择器 向下选择一个
.active+p{
background: #E52225;
}通用选择器 （当前元素下的所有兄弟元素）
.active~p{
background: #E52225;
}伪类选择器
伪类：带冒号的就是伪类
ul下面的第一个 （first第一）
ul li:first-child{
background: #E52225;
}
ul下面的最后一个（last最后 ）（child孩子）
ul li:last-child{
background: #2515AD;
}
p标签的父类选择当前的第一个元素
p:nth-child(2){
background: #788B23
}
鼠标悬停 hover(盘旋)也可以用于按钮
a:hover{
background:#E7060A
}属性选择器
<style>
.demo a{
float: left;
background: #0CB0C4;
width:50px;
height: 50px;
border-radius: 10px;/*圆角*/
text-align: center;/*文字居中*/
color: antiquewhite;/*文字颜色*/
text-decoration: none;/*去下划线*/
margin-right:10px; /*右边距*/
font:bold 20px/50px a;/*bold加粗 第一个px大小 第二个px向下偏移 a不知道*/
}
a[id]{
background: #17B464;
}
a[id=wm]{
background:red;
}
</style>
</head>
<p class="demo">
<body>
<a href="" class="wmt" id="wm">1</a>
<a href="" class="link" target="_blank">2</a>
<a href="" class="study" id="wm">3</a>
<a href="" class="back" id="wm">4</a>
<a href="" class="hover" id="wm">5</a>
<a href="" class="grounder" >6</a>
<a href="" class="autoplay" >7</a>
<a href="1.jpg" class="placeholder" id="14">8</a>
</p>
</body>a标签选择器 格式
a[ ]
{
…
}
=绝对等于
*=包含这个元素
^=以这个开头
$=以这个结尾
a[id]{
background:#17B464;
}
/*=绝对等于*/
a[id=wm]{
background:red;
}
/*^=以这个开头*/
a[href^=http]{
background: #400DEF;
}
/*$=以这个结尾*/
a[id$=m]{
background: #400DEF;
}字体样式(font字体)
字体的简单样式
color: antiquewhite; 背景颜色
font-family:"方正粗黑宋简体"; 字体样式
font-weight: bolder;加粗 字体粗细
font-weight:bold;
font-weight: lighter;
/* 划线*/
.l1{
text-decoration: line-through;//中划线
}
.l2{
text-decoration: overline;//上划线
}
.l3{
text-decoration: underline;//下划线
}
/* 去掉划线*/
text-decoration:none; 进阶操作
font:oblique bolder 20px/30px "微软雅黑"
/* 字体风格 字体粗细 字体粗细 字体行高 字体样式 */
文本样式（text）
text-indent: 2em; 首行缩进
text-align: center; 居中
行高和块的高度一致就可以居中
height: 300;
line-height: 300px;
/*图片和文字居中 前面是参照物 middle中间*/
img,demo2{
vertical-align:middle;
}
超链接伪类
a{
text-decoration: none;//去下划线
color: #000000;
}
a:hover{
color:crimson;
font-size:50px;
}
a:active{ //点击的效果
color: blue;
}
//字体阴影
text-shadow: orange 5px 5px 5px;
.logo2:hover{
opacity: 0; 切换图片
background-image: url("logo2.png" )
}背景图片填充方式
通过div设置一个边框(solid实线)（repeat重复）(url可以选择到图片)
border: 1px solid red;
background-image: url("300.jpg")//默认平铺
background-repeat: repeat-x //向x平铺
background-repeat: repeat-y //向y平铺
background-repeat: none-repeat //不平铺在指定区域应该如何填充
background: red url("300.jpg") 200px 10px no-repeat;圆角
一个角可以控制边长的一半
.jgp1{
width: 300px;
height: 300px;
border-radius: 100px 0px 20px 0px;
}display(块级元素和行级元素)
display: inline-block;//设置为行级元素并保存块级元素的样式
block//块
inline//行
float
float: right;
父级边框塌陷问题
一、增加父级元素的高度
二、建一个空div在div里面清楚浮动(这个div要建在父级里面)
.test{
clear: both;
margin: 0;
padding: 0;
}
三、在父级元素建一个overflow：hidden；
四、父类添加一个伪类：after
#father:after{
content: '';
display: block;
clear: none; /*清空浮动*/
}相对定位
position（位置）
会脱离父级区域，但是原来的位置会被保留，
position: relative;
left: 1200px;/*四个移动方向*/
top: 20px;
bottom: 20px;
right: 20px;绝对定位
width: 100px;
height :100px;
background: #0BCFE0;
display: inline-block;
position: absolute;
left: 200px;
top: 500px;固定定位
width: 100px;
height :100px;
background: #0BCFE0;
display: inline-block;
position: fixed;
margin-left: 1550px;
margin-top: 300px;
扫一扫
223
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
