day028css
what is css cascading style sheet 层叠级联样式表
html 超文本标记语言
- 美化html css选择器 盒子模型 浮动 定位
css 优势 html内容和样式分离 link 标签引入 可被多页面复用
利用SEO容易被搜索引擎收录 VUE不容易被收录
css 样式有就近原则
CSS伪类是用来添加一些选择器的特殊效果。
语法
伪类的语法：
selector:pseudo-class {property:value;}
CSS类也可以使用伪类：
selector.class:pseudo-class {property:value;}
anchor伪类
在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示
实例
a:link {color:#FF0000;} /* 未访问的链接 / a:visited {color:#00FF00;} / 已访问的链接 / a:hover {color:#FF00FF;} / 鼠标划过链接 / a:active {color:#0000FF;} / 已选中的链接 */
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>my css</title>
<link rel="stylesheet" href="css0.css"/>
<!-- <style>
h1{
color: pink;
}
</style> -->
</head>
<body>
<div id= "nav">
<!-- 列表 -->
<h2>全布水果</h2>
<ul>
<li><a href="#">apple</a><a href="#">pear</a><a href="#">banana</a></li>
<li><a href="#">apple</a><a href="#">pear</a><a href="#">banana</a></li>
<li><a href="#">apple</a><a href="#">pear</a><a href="#">banana</a></li>
</ul>
</div>
<p> tttta</p>
<span>span</span>
<p>ttt a</p>
<h1>
i am h1 今年过年不联系压不联系啥也不联系
</h1>
<br/>
<p>>大于号 ≷小于号</p>
<p class="a">我是class a</p>
<p class="a">我是class a</p>
<p class="a">我是class a</p>
<div id="b"></div>
<div class="hart">hart</div>
<p class = "pp">
ewwwwwwwwwwwwffffffffffffffffffffffaasdffffffffffffffff；sljdf水水水水水水水水水水水水水水水水水水水
sslkjflajsldjfljslfj收到两份简历升级到封建历史交锋的洛杉矶设计的垃圾分类收集东方连接数量的房间里了蒋介石的链接发来教案设计‘频频破发未分配较为频繁拉萨大家发链接
二艘i额顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶
</p>
<img src="imgs/00.png"/><br/><hr/>
<a href="www.oo.cn">autor:miss mi ya</a>
</body>
<!-- 盒子模式 -->
<!-- 1.margin+padding+board+content -->
</html>
h1{
color: pink;
background-color: blue;
border-radius: 20px;
text-align: center;
}
.a{
color: chartreuse;
font-size: larger
}
\#b{
background-color: coral;
width: 100px;
height: 100px;
border-radius: 50%;
}
.hart{
background-color: red;
width: 100px;
height: 200px;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
opacity: 0.44;
rotate: 45.%;
}
.hart:hover{
opacity: 1;
/* 鼠标路过事件 */
}
/* 选中p元素父级元素下的第1个元素并且这个元素是p */
p:nth-child(1){
background-color: rgb(228, 213, 7);
}
/* 选中p元素的父级元素下第二个p元素 */
p:nth-of-type(2){
background-color:seagreen;
}
a[href^=jpg]{
/* 选中以jpg开头的a元素 */
}
a[href$=jpg]{
/* 选中以jpg结尾的a元素 */
}
a[href*=jpg]{
/* 选中href包含jpg字符的a元素 */
}
/* 首航缩进2em */
.pp{
text-indent: 2em;
}
img ,span{
vertical-align:middle;/*图片和文字垂直居中*/
}
/* 鼠标悬停 变黄变大*/
a:hover{
font-size: 30px;
color: yellow;
}
h2{
background-color: tomato;
}
ul li{
height: 30px;
list-style: none;/*列表前缀 园点消失*/
}
#nav{
width: 200px;
background-color: violet;
}
a{/*去下划线*/
text-decoration: none;
margin-right: 4px;
}
#yuan{
width: 100px;
height: 100px;
border-radius: 50px 20px;
background-color: green;
box-shadow: 10px 10px 100px rgb(255, 47, 64);
overflow: hidden;/*超出部分影藏 scorll 超出部分增加滚动条*/
position: relative;/*相对定位，元素本身位置不会被占用，不会重叠*/
position: absoulte;/* 绝对定位，找到外层拥有定位属性的元素为基础，会重叠*/
}
/*防止父级div塌陷，在内部元素浮动flot时，父级div会造成空，塌陷，此时推荐清除浮动 在父级元素增加伪类*/
#yuan:after{
content: '';
display: block;
clear: both;/**/
opacity: 0.3;/*透明度*/
}
