标签：color 元素 100px jpg background day028css class
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;/*透明度*/
}
标签：color,元素,100px,jpg,background,day028css,class 来源： https://www.cnblogs.com/wwwzhqwww/p/14401711.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。