前端之css笔记2
1 属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
div[egon*="2"]{
color:red;
} .iten1{
background-colr:gold;
} .item2{
color:blue;
} div[egon~=alvin]{
color:red;
}
</style>
</head>
<body> <div class="item1 item2">DIV</div> <div class="c1" id="d1">fang</div> <div>jie</div> <div egon="yuan alvin">egon123</div>
<div egon="alex">egon456</div>
<span egon="123">egon</span> </body>
</html>
2 伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!--a:link{-->
<!--color:green;-->
<!--}--> <!--a:hover{-->
<!--color:goldenrod;-->
<!--}--> <!--a:active{-->
<!--color:blue;-->
<!--}--> <!--a:visited{-->
<!--color:red;-->
<!--}--> <!--p{-->
<!--background-color:wheat;-->
<!--}--> <!--span:after{-->
<!--content:"";-->
<!--display:block;-->
<!--}--> <!--<!–.c1{–>-->
<!--<!–width:300px;–>-->
<!--<!–height:200px;–>-->
<!--<!–background-color:wheat;–>-->
<!--<!–}–>-->
<!--.c1:hover{-->
<!--background-color:gray;-->
<!--}--> .box1,.box2{
width:300px;
height:200px;
}
<!--.box1{-->
<!--background-color:wheat;-->
<!--}-->
<!--.box2{-->
<!--background-color:goldenrod;-->
<!--}--> <!--操作的标签一定是悬浮标签的子元素-->
<!--.outer{-->
<!--width:300px;-->
<!--border: 1px solid red;-->
<!--}--> <!--.outer:hover .box1{-->
<!--background-color:red;-->
<!--}--> </style>
</head>
<body> <div class="c1"></div>
<a href="#">hello world</a>
<span>hello</span>
<div></div>
<a href="">click</a> <div class="outer">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
3 继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
body{
color:erd;
} p{
color:darkgreen;
} </style>
</head>
<body> <p>ppp</p>
<div class="c1">
DIV
<p>ppppp</p>
<span>SPAN</span>
<div>DIV</div>
</div> </body>
</html>
4选择器优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> /*id:100 class:10 element:1*/
<style>
p{
color:red；
} #d1{
color:gold;
} .c1{
color:green;
} #d2{
color:blueviolet;
} c4{
color:red!important;
} #d2{
color:green;
}
</style>
</head>
<body> <p class="c1" id="d1">ppp</p> <div class="c2">
<div class="c3">
<p class="c4 c5" id="d2" style="...">p4</p>
</div>
<p class="p1"></p>
</div> <p>
<div>div</div>
</p> </body>
</html>
5 属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
h2{
<!--color:#8B5742;-->
color:RGBA(255,0,0,0.5);
width:200px;
heeight:200px;
} .c1{
color:#8B5742;
width:200px;
heeight:200px;
} span{
width:200px;
height:200px;
background-color:goldenrod;
}
</style>
</head>
<body> <div class="c1">DIV</div> <h2 class="c2">H2</h2> <span>SPAN</span> <a href="#">click</a> </body>
</html>
6 水平对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color:wheat;
text-align:justify;
}
</style>
</head>
<body> <p>fang jie</p>
</body>
</html>
7 文本属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
<!--a{-->
<!--text-decoration:none;-->
<!--font-weight:;-->
<!--font-style:italic;-->
<!--}--> <!--p{-->
<!--word-spacing:20px;-->
<!--letter-spacing:3px;-->
<!--}--> <!--div{-->
<!--background-color:wheat;-->
<!--width:100%;-->
<!--height:300px;-->
<!--line-height:300px;-->
<!--text-align:center;-->
<!--}--> .btn{
width:30px;
height:60px;
background-color:grey;
color:white;
text-align:center;
line-height:60px;
font-size:30px;
} img{
vertical-align:-6px;
}
</style>
</head>
<body> <!--<p>I am fang</p>--> <!--<a href="">click</a>--> <!--<div>H1H1H1</div>--> <div class="btn"> < </div> <div>title
<img src="http://dig.chouti.com//images/logo.png" alt="">
</div>
</body>
</html>
8 背景属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
.c1{
border:1px solid red;
width:100%;
height:600px;
background:url("http://dig.chouti.com//images/logo.png") no-repeat center center;
<!--background-image:url("http://dig.chouti.com//images/logo.png");-->
<!--background-repeat:no-repeat;-->
<!--background-position:center center;-->
}
</style>
</head>
<body> <div class="c1"></div>
</body>
</html>
9边框属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
.c1{
width:100px;
height:200px;
border-right:3px dashed red;
<!--border:3px dashed red;-->
<!--border-style:dashed;-->
<!--border-color:red;-->
<!--border-width:5px;-->
<!--border:3px dashed red;-->
<!--border-right:3px dashed red;-->
}
</style>
</head>
<body> <div class="c1"></div>
</body>
</html>
10 列表属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
list-style:none;
}
</style>
</head>
<body> <ul>
<li>111</li>
<li>111</li>
<li>111</li>
</ul> </body>
</html>
11 内外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style> .c1{
width:200px;
height:200px;
background-color:wheat;
padding:50px;
border:10px solid red;
margin-bottom:20px;
} .c2{
margin-top:20px;
whdth:200px;
height:200px;
background:green;
padding:50px;
border:10px solid blue;
} .pager_3{
width:20px;
height:20px;
background-color:darkgray;
padding:;
border-redius:20%;
} </style>
</head>
<body> <div class="c1">DIV</div>
<div class="c2">DIV</div> <div class="pager_3">3</div> </body>
</html>
12 float属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:;
} .c1{
width:100px;
height:200px;
background-color:wheat;
float:left;
} .c2{
width:200px;
height:100px;
background-color:green;
float:left;
} .c3{
width:150px;
height:150px;
background-color:goldenrod;
float:left;
} .outer{
width:200px;
height:200px;
background-color:green;
margin:20px auto;
}
</style>
</head>
<body> <div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div> <span class="c1"></span>
<span class="c2"></span>
<span class="c3"></span> <div class="outer"></div> <ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>
前端之css笔记2的更多相关文章
- 前端之css笔记1
1 css引入方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 前端之css笔记3
一 display属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- 前端：jQuery笔记
前端:jQuery笔记 此系列文章乃是学习jQuery的学习笔记. Asp.net MVC Comet推送 摘要: 一.简介 在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收 ...
- CSS笔记--选择器
CSS笔记--选择器 mate的使用 <meta charset="UTF-8"> <title>Document</title> <me ...
- 前端学习:学习笔记(JS部分）
前端学习:学习笔记(JS部分) 前端学习:JS学习总结(图解) JS的简介 JS基本语法 JS内置对象 JS的函数 JS的事件 JS的BOM JS的DOM JS的简介 新建步骤 <body ...
- 前端开发css实战：使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
- 前端之css
前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
随机推荐
- oracle imp dmp
windows>cmd> imp userid=用户名/密码@orcl file=d:\nc60.dmp full=y imp userid=SYSTEM/password@orcl fi ...
- Activity服务类-2 EngineService服务类
一共提供了9个接口 //获取RepositoryServiceRepositoryService getRepositoryService();//获取RuntimeServiceRuntimeSer ...
- 相对固定位置 relative absolute
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vector实现（只能装入string）
#include<iostream> #include<string> #include<memory> #include<utility> using ...
- python 逐行读取文本
f = open("foo.txt") # 返回一个文件对象line = f.readline() # 调用文件的 readline()方法while line: print li ...
- linux查看网卡驱动
[root@hudson ~]# yum install ethtool -y [root@hudson ~]# ethtool -i em1driver: bnx2version: 2.2.3fir ...
- pyplot图像组件
pyplot图像组件 ax子对象的组件内容 Title 图表标题 plt.title() Axis 坐标范围,x轴,y轴 plt.axis() label 坐标轴标注 plt.xlabel() plt ...
- express + mongodb 搭建一个简易网站(二)
express + mongodb 搭建一个简易网站 (二) 在搭建网站(一)中,实现了简单的路由功能,这离一个完整的网站还差的有点远,继续撸代码吧. 1.首先在根目录下新建一个views文件夹,用来 ...
- sdc docker连接
curl -O https://raw.githubusercontent.com/joyent/sdc-docker/master/tools/sdc-docker-setup.sh &&a ...
- Only POT texture can be compressed to PVRTC format
在图片压缩格式 报这个Warning的时候,意思是该图片必须要采用2的幂次方大小才能使用该格式. POT: Power of Two. 采取方式是在advanced里边,把Non Power of 2 ...