前端之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 ...
随机推荐
- as3与php交互
(1)直接读取 php: <? $state="开始接收"; $var1="收到"; echo "state=".$state.&qu ...
- web 复制功能和span光标
参考文章:https://www.cnblogs.com/tugenhua0707/p/7395966.html https://blog.csdn.net/woshinia/article/deta ...
- pycharm专业版（window）安装
1.官网下载 2. 3.直接finlsh 4. 5. https://pan.baidu.com/s/1mQcc98iJS5bnIyrC6097yA 密码:b1c1
- vim nginx配置文件时具备语法高亮功能
1.下载nginx.vim 下载页面:http://www.vim.org/scripts/script.php?script_id=1886 wget http://www.vim.org/scri ...
- 注册COM
可以用代码在程序中实现COM的注册. 举例如下: (假设需要注册的文件为test.ocx)uses OLEctl,....varOCXHand: THandle;RegFunc: TDllRegist ...
- ［转载］百分之百自动登录2345王牌技术员联盟源代码（delphi）
资源地址:http://download.csdn.net/detail/softlib/9670613
- Web标准：九、CSS表单设计
Web标准:九.CSS表单设计 知识点: 1.改变文本框和文本域样式 2.用图片美化按钮 3.改变下拉列表样式 4.用label标签提升用户体验 1)改变文本框和文本域样式 文本框标签:<i ...
- JAVA——遍历
关于遍历,发现了个坑. 详见如下: package com.fxl.test; import java.util.ArrayList; import java.util.Iterator; impor ...
- dreamwave基础
WEBcs架构需要在客户段安装程序, 需要安装程序, 工作量会比较大, 需要安装和维护, 比如以后系统升级, 会很麻烦. 优点是一些业务逻辑可以在客户端, 可以减少服务器的一些压力, 客户端的界面操作 ...
- ubuntu安装谷歌拼音输入法
在这篇教程中,我将告诉你如何在ubuntu系统上安装谷歌拼音输入法.谷歌拼音输入法有基于ibus框架的,也有基于fcitx框架的.我只演示fcitx框架下谷歌拼音输入法的安装,因为ibus框架的谷歌拼 ...