目录
1.内部样式:直接把CSS嵌入到HTML中,放到style标签里
2.外部样式:把CSS写成一个单独的.css文件,由html通过link标签引入过来
层叠样式表:
CSS的主要作用是使网页变得好看
比如颜色是一个样式,大小又是一个样式,所有的样式叠加起来就能使网页变得好看,这称作CSS样式表
CSS的引入方式:
1.内部样式:直接把CSS嵌入到HTML中,放到style标签里
(style标签可以放到任意位置,但习惯上最好放到head标签内)
2.外部样式:把CSS写成一个单独的.css文件,由html通过link标签引入过来
3.内联样式:直接把CSS属性写到元素的style属性内
(如果同时使用了多种样式,内联样式的优先级最高)
选择器:
CSS里的选择器由很多中,但这里只对CSS简单了解,所以不多介绍
标签选择器:
类选择器:
这里的类名是一套新的概念,和java内的类不一样
针对于优先级,有一套专门的公式来计算优先级数值
但这里只针对CSS略有了解即可,所以不介绍了
一个元素也可以具有多种类,每个类之间用空格作为分割:
id选择器:
使用#作为开头
后代选择器:
CSS常见属性:
与字体有关:
font-size | 用于设置字体的大小 |
font-family | 用于设置字体类型 |
font-weight | 用于设置字体粗细 |
font-style | 用于设置字体是否倾斜 |
div h3{
/* 字体大小 */
font-size: 50px;
/* 字体家族 */
font-family: "微软雅黑";
/* 字体粗细 范围100~900 */
font-weight: 100;
/* 字体倾斜 */
font-style: italic;
}
文本有关:
color | 设置文本颜色,除了通过名字设置常见的色号,也可以通过rgb(xxx,xxx,xxx)设置复杂的颜色 |
text-align | 设置文本位置,左 left 中 center 右 right |
text-indent | 设置首行缩进,单位px |
text-decoration | 用于添加文本装饰,比如下划线,波浪线等等,也可以用于修改装饰颜色等,其中典型的取值是none,常用于去除a标签的下划线 |
line-height | 设置行间距,单位px |
.demo1{
/* 文本颜色 */
color: red;
/* 文本位置 */
text-align: center;
/* 首行缩进 */
text-indent: 30px;
/* 用于添加文本装饰,比如下划线,波浪线等等,也可以用于修改装饰颜色 */
text-decoration: underline;
/* 设置行间距 */
line-height: 100px;
}
背景有关:
width | 设置背景宽度,相当于横坐标 |
height | 设置背景高度,相当于纵坐标 |
background-color | 设置背景颜色 |
background-image | 设置背景图片 |
background-repeat | 设置图片是否平铺,当图片大小小于背景大小时,默认采取平铺图片 |
background-position | 设置图片位置,以左下角为远点,第一个为x,第二个为y单位px |
background-size | 设置图片大小,如果只有一个数,则等比例伸缩,两个数则强制拉伸 |
.demo2{
/* 设置背景宽度,相当于横坐标 */
width: 1000px;
/* 设置背景高度,相当于纵坐标 */
height: 500px;
/* 设置背景颜色 */
background-color: gray;
/* 设置背景图片 */
background-image: url(dog.png);
/* 禁止图片平铺,当图片大小小于背景大小时,默认采取平铺图片 */
background-repeat: no-repeat;
/* 设置图片位置,以左下角为远点,第一个为x,第二个为y单位px */
background-position: center center;
/* 设置图片大小,如果只有一个数,则等比例伸缩,两个数则强制拉伸 */
background-size: 500px;
}
设置圆角矩形:
border-radius
单位px 代表内切圆的半径大小,半径越大,圆弧越大
如:
.demo3{
border-radius: 250px;
font-size: 80px;
text-align: center;
width: 500px;
height: 500px;
background-repeat: no-repeat;
background-position: center center;
background-size: 600px;
background-image: url(dog.png);
}
显示模式display:
显示模式主要与display这个属性有关,其中最主要的有三种显示模式:
1.display:block;块级元素,独占一行,如h1~h6,p,div,ul,li,table....
2.display:inline;行内元素,不独占一行,如span a,b
3.display:none;隐藏元素
块级元素和行内元素的区别有很多,其中最主要的就是块级元素可以设置尺存,行内元素不能
我们通常会把行内元素修改为块级元素,一般不会将块级元素修改为行内元素
CSS盒子模型:
边框属性:
更详细的边框属性可以参考CSS 参考手册 (w3school.com.cn)
*{
/* 由于边框的像素大小会影响总大小 */
/* 有时候我们想让width,height决定盒子的总大小 */
/* 可以使用box-sizing来设置为border-box让边框不影响盒子总大小 */
box-sizing: border-box;
}
.demo4{
width: 500px;
height: 500px;
/* 设置边框可以四条边框一起设置,三个参数分别是颜色,宽度,风格 */
border: green 20px solid;
/* 四条边也可以分别设置 */
border-top: red 20px solid;
border-radius: 20px;
}
内边距属性:
内边距(padding)就是内容与边框之间的距离
.demo5{
width: 500px;
height: 500px;
border: black 10px solid;
/* 这种写法是四个内边距一起设置 */
/* padding: 30px; */
/* 这种写法是上下30px,左右20px */
/* padding: 30px 20px; */
/* 这种写法是按照上右下左顺时针的方式设置边内距 */
/* padding: 30px 20px 10px 40px */
/* 也可以单独对其中一条内边距进行设置 */
/* padding-left: 20px; */
}
外边距属性:
margin的使用方法和padding使用方法是类似的
.demo6{
width: 500px;
height: 500px;
border: black 10px solid;
background-color: gray;
/* 这种写法是四个外边距一起设置 */
/* margin: 30px; */
/* 这种写法是上下30px,左右20px */
/* margin: 30px 20px; */
/* 这种写法是按照上右下左顺时针的方式设置边内距 */
/* margin: 30px 20px 10px 40px */
/* 也可以单独对其中一条外边距进行设置 */
/* margin-left: 30px; */
/* 当左右外边距同时为auto的时候能实现水平居中效果 */
/* 但是上下外边距同时为auto时并不能实现水平居中 */
margin-left: auto;
margin-right: auto;
}
弹性布局:
有时候我们需要让块级元素实现水平排列,比如:
这时候就需要使用到弹性布局,其中最主要的有三种相关属性:
1.display:flex;用于开启弹性布局(flex就是弹性布局),某个元素一旦开启弹性布局,其内部子元素就会按照水平方向排列,但子元素内部的子元素是不受影响的
2.justify-content: 设置水平方向的排列规则,居中排列,靠左,靠右,分散开。。
3.align-items:设置垂直方向的排列规则
.demo7{
margin-left: auto;
margin-right: auto;
/* 开启弹性布局 */
display: flex;
/* 横向排列的规则,常用的有center space-around space-between left right */
justify-content: space-around;
/* 纵向排列的规则 */
align-items: center;
height: 250px;
width: 1000px;
}