下面是学习用的html和css文件，创建对应文件复制代码到文本编辑器看，缩进更舒服。
index.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS引用，选择器及其优先级</title>
<!-- 引入css 页面级css -->
<!-- <style type="text/css">
div{
width: 100px;
height: 100px;
background-color: green;
}
</style> -->
<!-- 外部css文件 -->
<link rel="stylesheet" type="text/css" href="style.css"> <!--异步加载-->
</head>
<body>
<!-- 引入css 行间样式-->
<!-- <div style="width: 100px;height: 100px;background-color: red"></div> -->
<!-- 选择器 -->
<!-- id -->
<div id="only"></div>
<!-- class -->
<div class="demo demo1">$100</div>
<!-- 标签选择器 -->
<div></div>
<!-- 通配符选择器 *-->
<!-- 属性选择器 [id]或者[id="demo"]-->
<!-- 选择器优先级 !important（权重 256进制 infinity）>行间样式（1000）>id（100）>class==属性选择器==伪类选择器（10）>标签选择器（1）>通配符（0） (同行权重相加 大的更优先) -->
<!-- 父子选择器 -->
<div>
<span></span>
<em>
<span>
</span>
</em>
</div>
</body>
</html>
------------------------------------------------------------------------------
style.css文件
/*注释*/
*{
margin: 0px; /*body天生带8px*/
padding: 0px;
}
div{
width: 100px;
height: 100px;
background-color: red;
}
#only{
width: 100px;
height: 100px;
background-color: green;
}
.demo{
width: 100px;
height: 100px;
background-color: yellow;
}
.demo1{
color: #f40;
}
[id]{
}
/*父子选择器 不限定为标签 孙子也可 便利顺序是从右向左*/
div span{
}
/*直接子元素选择器 父子关系*/
div span{
}
/*并列选择器*/
div.span{
}
/*分组选择器 */
div,strong,em,.demo,#only{
}
/*伪类选择器 鼠标挪入时触发*/
a:hover{
text-decoration: none;
}
---------------------------------------------------------
css基础属性
#only{
font-size: 100px; /*字体大小 默认16px 设置的是字体的高*/
font-weight: bold; /*字体加粗 可以设置100-900*/
font-style: italic; /*字体倾斜*/
font-family: arial; /*字体*/
color: #f40; /*字体颜色 1.英文单词 2.颜色代码RGB(光学三原色)#00-ff 00-ff 00-ff 3.颜色函数rag(255,255,255)*/
border: 10px solid black; /*边框(宽度 样式 颜色) border-width border-style border-color*/
border-width: 1px; /*宽度*/
border-style: dashed; /*样式*/
border-color: rgb(0,0,0); /*颜色*/
/*画三角形*/
width: 0px; /*容器的宽度*/
height: 0px; /*容器的高度*/
border:100px solid black;
border-left-color: transparent; /*左边框颜色 transparent透明色*/
border-top-color: transparent;
border-bottom-color: black;
border-right-color: black;
text-align: center; /*文本对齐方式 居中显示*/
line-height: 16px; /*行高设置*/
height:16px; /*单行文本垂直居中 height = line-height*/
text-indent: 2em; /*首行缩进2个字 1em = font-size*/
text-decoration: line-through; /*line-through中划线 none没有线 underline 下划线 overline上划线*/
cursor: pointer; /*鼠标挪入鼠标变样式*/
/*1.行级元素(内联元素) inline
feature : 内容决定元素所占位置
不可以通过css改变宽高
span strong em a del
2.块级元素 block
feature ：独占一行
可以通过css改变宽高
div p ul li ol form address
3.行级块元素 inline-block
feature ： 内容决定大小
可以改变宽高
img（多张并列 代码中间不要有空格或者回车 防止图片中间有空隙）*/
display: block; /*设置 行级inline 块级block 行级块元素inline-block*/
/*凡是带有inline属性的元素 都有文字特性*/
/*自定义标签 初始化标签 设置标签的属性*/
/*通配符标签* 初始化所有标签*/
/*absolute 脱离原来位置进行定位 相对于最近的有定位的父级进行定位 如果没有相对于文档定位 需要定位的元素设置成这个*/
/*relative 保留原来位置进行定位 相对于自己原来的位置进行定位 用来做参照物*/
/*fixed 广告定位 在屏幕的一个位置不动*/
z-index: 1; /*层 越大越上*/
/*相对于窗口居中*/
position: fixed;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -50px;
}
*两栏布局*/
/*.right{
background-color: green;
width: 100px;
height: 100px;
position: absolute;
right: 0;
opacity: 0.5;
}
.left{
background-color: yellow;
height: 100px;
margin-right: 100px;
}*/
/*margin塌陷解决办法
触发一个盒子的bfc
position: absolute;
display: inline-block;
float: left/right;
overflow: hidden;*/
.wrapper{
/*margin-left: 100px;
margin-top: 100px;
width: 100px;
height: 100px;
background-color: black;*/
/*position: absolute;
display: inline-block;
float: left/right;
overflow: hidden;*/
}
.content{
/* margin-left: 50px;
margin-top: 50px;
width: 50px;
height: 50px;
background-color: green;*/
}
/*margin合并 不解决 使用数学方法调试*/
/*float*/
/*伪元素清除浮动流*/
.float::after{
content: "";
display: block;
clear: both; /*清除周围的浮动流 需要是块级元素*/
}
/*父级包住浮动元素 可以在子元素下加一个 p标签 并给p标签清除浮动流*/
/*伪元素 天生是行级元素 想要修改css 需要 改 display 为inline-block*/
/*#weiyuansu::before{
content: "i am";
}
#weiyuansu::after{
content: "far";
}*/
#point{
width: 300px;
height: 20px;
line-height: 20px;
border:1px solid black;
/*单行文本溢出打点展示三件套*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
没有评论:
发表评论