<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<!--也可在head style标签里-->
<!--<style type="text/css">-->
<!--p{-->
<!
--color: bisque
;-->
<!
--font-size:40px
;-->
<!--
}-->
<!--</style>-->
<!--可将样式编写在外部css文件中-->
<!--通过link标签引入 使css HTML 完全分离-->
<link rel=
"stylesheet" type=
"text/css" href=
"style.css">
<style type=
"text/css">
#p1{
font-size: 20px
;
}
.p2{
color: yellow
;
}
.hh{
font-size: 50px
;
}
#p1, .p2, .hh{
background-color: antiquewhite
;
}
*{
}
span.p3{
}
#d1 span{
color:gold
;
}
#d1 p span{
}
div > span{
}
a:link{
}
a:visited{
}
a:hover{
}
a:active{
}
input: foucs{
}
p::selection{
}
p:first-letter{
}
p:before{
content: '我在最前面';
color: aqua
;
}
p:after{
}
p[title="hello"]{
background-color: aqua
;
}
</style>
</head>
<body>
<!--css样式到属性 只能在当前标签使用-->
<p>我要学前端</p>
<!--块元素div 主要页面布局-->
<div style=
"background-color: bisque; width: 200px;">我是div</div>
<div style=
"background-color: yellow; width: 200px;">我是一个div</div>
<!--span 内联元素 行内元素 只占自身大小 span专门用来选中文字元素 为其设置大小 主要文本样式-->
<!--块元素包含内联（一般）-->
<span>span</span>
<!--a元素可包含任意元素 除自身-->
<!--p不能包含任何块元素-->
<h1>哈哈哈哈哈</h1>
<p title=
"hello">爱笑的女孩运气不会太差</p>
<p id=
"p1">爱笑的女孩运气不会太差</p>
<p class=
"p2 hh">爱笑的女孩运气不会太差</p>
<p class=
"p2">爱笑的女孩运气不会太差</p>
<p class=
"p2">爱笑的女孩运气不会太差</p>
<p>爱笑的女孩运气不会太差</p>
<p>爱笑的女孩运气不会太差</p>
<p class=
"p3">爱笑的女孩运气不会太差</p>
<span class=
"p3">学习css</span>
<!--元素之间的关系-->
<!--父元素 直接包含子元素 子元素 直接被父元素包含 祖先元素 后代元素 兄弟元素 拥有相同父元素-->
<div id=
"d1">
<span>我是div中的span</span>
<p>
<span>我是p中span</span>
</p>
</div>
<span>我与div是兄弟</span>
<a href=
"http://www.baidu.com">访问过的链接</a>
<br/><br/>
<a href=
"http://www.baidu.com">访问过的链接</a>
<!--文本输入框-->
<input type=
"text"/>
<!--title -->
<p title=
"hello">爱笑的女孩运气不会太差</p>
</body>
</html>
此博客仅用于博主学习记录
