不是因为有了希望才去坚持,而是坚持了才有了希望
目录
一.导入方式
1.行内样式
在标签元素中,编写一个style属性,编写样式即可
<h1 style = "color : red">我是标题</h1>2.内部样式
在html的style标签内书写
<style>
h1{
color: red;
}
</style>3.外部样式(常用)
在html内使用link标签导入外部css文件,在外部书写css代码
<link rel="stylesheet" href="css/style.css">
二.选择器
1.基本选择器(常用)
1.1标签选择器
<h1 class = 'class' id = 'id'>我是标题</h1>h1{
color: red;
}1.2类选择器
.class{
color: blue;
}1.3id选择器
#id{
color: black;
}优先级
id选择器>类选择器>标签选择器(上面的h1标签显示为黑色)
2.层次选择器
2.1后代选择器
body后面的所有p标签
2.2子选择器
body后面的第一代标签
2.3相邻兄弟选择器
下面的一个兄弟+
2.4通用兄弟选择器
下面的所有兄弟~
3.结构伪类选择器
4.属性选择器
格式
标签[]{}a[id]{}
/*a标签中存在id属性的元素*/
a[id = links]{}
/*a标签中id是links的元素*/
a[id *= links]{}
/*a标签中id包含links的元素*/
a[id ^= links]{}
/*a标签中id以links开头的元素*/
a[id $= links]{}
/*a标签中id以links结尾的元素*/
类似于正则表达式
三..美化网页
1.字体样式font
2.文本样式text
a{
color: rgba(0,255,255,0.9);
/*0.9是透明度*/
text-align: center;
/*文字左右居中*/
text-indent: 2em;
/*首行缩进2格*/
height: 300px;
line-height: 300px;
/*字体高度和整体高度一直,就会上下居中*/
text-decoration: none;
/*取消下划线*/
}
图片和文本对齐
<p>
<img src="../resources/image/1.jpg" alt="">
<span>我是奶龙</span>
</p>img,span{
vertical-align: middle;
}显示效果
3.超链接伪类
鼠标悬停执行
a:hover{
color: red;
}4.列表样式
ul li{
list-style: none;
/*去掉圆点*/
list-style: circle;
/*空心圆*/
list-style: decimal;
/*有序数字*/
list-style: square;
/*正方形*/
}5.背景background
添加背景默认为全部平铺
a{
background: red url("resources/image/1.jpg") 270px 10px no-repeat;
}颜色,图片地址,图片位置,平铺方式no-repeat就是不平铺,如下图
直接设置背景颜色
a{
background: red;
}
四.盒子模型
在网页中,每个元素都是一个盒子模型,网页会有默认的边距大小,所以一般需要初始化边距为0
h1,ul,li,a,body{
margin: 0;
/*外边框设置为0*/
padding: 0;
/*内边框设置为0*/
text-decoration: none;
/*消除下划线*/
}
1.边距参数顺序
每个盒子是一个矩形,他有四个边,所以设置内外边距的时候会有四个参数
margin: 10px 10px 10px 10px;
如果传入四个参数是上左下右(顺时针旋转)
传入两个参数是上下和左右
传入一个参数就是全部
自动设置边距使元素居中auto
margin: 0 auto;
2.边框border
border : 3px solid red; (solid是实线,dashed是虚线)
2.1圆角边框
圆形 = 宽度的一半
五.浮动
在一个网页中,每个元素会出现在不同的位置,我们要对这些元素进行布局,就需要用到浮动
这些元素有默认的布局方式,我们要改变他们来手动布局
1.display
这里我们需要引入一个抽象概念,我们可以叫他黑框
我们在写html代码的时候,会写很多div,把一些元素放到div中,这个div就是一个边界,使用display改变元素属性的时候,不会使他离开这个"黑框div"
display : block;(块元素)
display : inline;(行内元素)
display : inline-block;(既是行内元素也是块元素),是块元素但是可以在一行
行内元素不能设定height和width,必须要变成块元素才可以设定
导航栏就是ul li标签变成行内元素
2.float
浮动就是把这个块元素单独飘起来,会飘出黑框外
float : left; 左浮
float : right; 右浮
浮动会导致元素挤在一起,所以我们需要清除浮动clear both;
既有浮动效果,也要有块元素效果(就让他排下去,不要挤在一起),就要清除浮动
3.黑框塌陷问题
我们知道,浮动会飘出黑框外,我们不想出现这种情况就要解决黑框塌陷问题
推荐使用第四种方法
3.1 overflow
overflow : scroll 规定文本或图片超过了高度,加滚动条(没人会用这个)
overflow : hidden 规定文本或图片超过了高度,会隐藏(知道这个就行)
4.display和float对比
六.定位position
我们对一个网页中的元素进行布局的时候,还需要设置他们具体的位置,所以就要用到定位
1.相对定位relative
相对于自己原来的位置偏移,仍然在黑框中,没有塌陷,原来的位置会被保留
position : relative
top : -20px; (距离上面-20px,就是上移)
left : 20px; (距离左边20px,就是右移)
bottom : -10px(距离下面-10px,就是下移)
right : 20px(距离右边20px,就是左移)
2.绝对定位absolute
一般都是相对于父元素定位
给父级元素加上相对定位,就会相对于父级元素定位
不给父元素加相对定位就会相对于浏览器定位,滚动滑轮位置会变(初始浏览器大小)
给父元素加上相对定位relative
自身相对于父元素左移30px
3.固定定位fixed
这里设置第一个div元素相对于浏览器位于初始的右下角,但是滚动滑轮位置会变
设置第二个div元素固定定位在浏览器右下角,滚动滑轮位置不会变
4.图层z-index
我们需要把一些块元素堆叠的时候,就需要使用z-index来决定谁在上谁在下
练习
HTML代码
CSS代码
opacity透明度
