CSS的全称是Cascading Style Sheets，中文意思是层叠样式表
CSS的引入方式
1、行内样式表
直接在标签中写入样式，如：
<div style="width:100px;height:100px;background-color:red">
2、内部样式表
在style标签中书写CSS代码。style标签写在head标签中。如：
<!DOCTYPE>
<head>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:red
}
</head>
<body>
<div></div>
</body>
3、外部样式表
CSS代码保存在扩展名为.css的样式表中，将该文件引入到html文件中
<link type="text/css" rel="styleSheet" href="CSS文件路径" />
4、css import
在css文件里面再引入另一个css文件，如：
@import url("另一个CSS文件路径")
标签并排的方式float
想让多个块级元素并排，可以将所有子元素设置浮动float属性，并给所有浮动的子元素的父级元素，加上一个.clearfix的类，如下所示：
.clearfix::after{
content:'';
display:block;
clear:both;
}
关于写样式的tip
.topNavBar>nav>ul{}
其中>的意思是下一个元素必须是上一个元素的儿子，孙子都不行，很严谨
让a标签中的字体下划线去掉，在a中写样式 text-decoration:none;
让li中的每个小圆点消失，就在ul中写样式list-style:none;
当<li>没有把<a>包起来时，在a中写样式 display:block;
div 高度由其内部文档流元素的高度总和决定
文档流：文档内元素的流动方向，内联元素从左往右流动，块级元素从上往下流动
英文单词是不能分割的，如果想要让它分割，则写一个属性word-break:break-all;
脱离文档流的方法：设置定位position
positon : fixed;
top : 0 ; //该值可自定
left : 0 ; //该值可自定
让背景图片居中：background-position : center center; //水平居中，垂直居中
让背景图片按比例缩放：background-size : cover;
让一个div水平居中，只要设置margin : 0 auto;即可
类似于span的内联元素是不接受设置宽高的，除非把它设置为inline-block，即display:inline-block;
让文字水平居中：text-align : center;
要让某个元素绝对定位，在该元素上写position : absolute;
还要再其父元素上写position : relative;
上下边距不一样，在该元素样式中写vertical-align : top;
用css制作三角形：
等腰三角形
有一个div，给div设置样式
div{
border-bottom : 10px solid red;
width : 0 ;
height : 0 ;
}
直角三角形
有一个div，给div设置样式
div{
border-right : 10px solid red;
width : 0 ;
height : 0 ;
border-top-width : 0px;
}
网友评论