margin 外边距 border边框 padding内边距
div 空的块标签 span 空的行内标签
css入门
- 是什么
- 怎么用
- css选择器 (重点)
- 美化网页
- 盒子
- 浮动
- 定位
- 动画
什么是css
Cascading Style Sheet 层叠级联样式表
主要是美化网页
字体 颜色 边框 等等,
css发展史
css2.0 div+css ,html与css分离
css2.1 浮动和定位
css3.0 圆角,阴影,动画,除了动画,所有浏览器都支持
快速入门
-
在head 中写style标签
-
直接写到css中
基本语法
选择器{
声明;
声明;
声明;
}
-
html连接到css
在head里写一个link标签,新建css文件,css文件里面包含了选择器,href写相对路径
<link rel="stylesheet" href="../第一个css程序/css/style.css">
CSS的三种导入方式
- 内部样式,写在head的style标签块里面
- 外部样式,写在外部css文件中,通过link标签链接
- 行内样式,写在html代码中
优先级 就近原则,一般来说行内>内部>外部
但是如果link写在style下面,则外部>内部,所以不推荐用内部样式写css
行内样式建议用来比较大的项目修改一小部分
css的注释为/**/ 和html注释不同
导入式 @import+url是css2.1特有的
三种基本选择器
标签选择器
<style>
h1{
color: #6abf3c;
}
</style>
所有的h1标签都会改变
类选择器class
.yiji{
color: aquamarine;
}
</style>
</head>
<body>
<h1 class="yiji">一个一级标题</h1>
<h1 class="yj">一个标题</h1>
.加class名称,好处可以用相同的class实现css的复用
id选择器
<style>
#h1title{
color: blue;
}
</style>
</head>
<body>
<h1 class="yiji" id=h1title>一个一级标题</h1>
class和id能同时存在
选择器语法 #id名称{
}
id必须保证全局唯一
选择器优先级
ID选择器>class选择器>标签选择器
层次选择器
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
<style>
/* 后代选择器 标签 空格 标签{} 选中所有空格后标签类型的标签 */
body p{
color: blue;
}
/* 子选择器,选择后一代的类型 */
body>p{
color: aqua;
}
/* 相邻兄弟选择器,向下选择一位同一代的,不包括自己*/
.active+p{
color: blueviolet;
}
/* 兄弟选择器,向下选择同一代的,不包括自己*/
.active~p{
color: brown;
}
</style>
</head>
<body>
<p class="active">p0</p>
<p>p1</p>
<p>p2</p>
<ul>
<li> <p>p3</p></li>
<li> <p>p4</p></li>
<li> <p>p5</p></li>
<li> <p>p6</p></li>
</ul>
</body>
结构伪类选择器
伪类 带冒号:
a标签
a:hover {};鼠标移到时状态 重点,只需要记住这个
a:active{};鼠标点击时的状态
a:visited{};点过之后,一般用默认颜色
其他
<style>
/* 第一个子元素*/
ul li:first-child{
color: brown;
}
最后一个子元素
ul li:last-child{
color: #670c8e;
}
这个ul所有li元素
ul li{
color: #670c8e;
}
</style>
p:nth-child(1) 选择父类的第几个子元素,如果第一个子元素是p标签才会生效
p:nth-of-type(1) 按照类型选择父元素的第几个符合条件的元素
属性选择器
标签[ 属性 = 属性名 或者正则表达式]{
}
改herf属性以http开头的a标签
a[herf ^= http]{
}
=号 绝对等于 *= 包含 ^= 以什么开头 $= 以什么结尾
a[]{
}
美化部分
字体样式
span标签,约定重要的标签,自己设置属性
font-family 字体样式
font-size 字体大小 px单位 em缩进
font-weight 字体粗细
color 字体颜色
文本样式
1.颜色 color: ; rgba(红,绿,蓝,透明度);
2.居中 text-aline:center;
3.首行缩进 text-indent :2em;
- background文本背景颜色
- line-height:设置行高,行高设置为块高度时,效果为居中
- text-decoration none;取消下划线
- text-shadow 文字阴影
列表设计
list-style :none; 去掉圆点,去掉数字
背景
背景图片
默认平铺
background-repeat;
背景颜色
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SbJYDgfM-1619612300613)(…/…/AppData/Roaming/Typora/typora-user-images/image-20210428193609132.png)]
盒子模型
margin 外边距 border边框 padding内边距
外边距的用处,居中盒子的元素 margin :0 auto;
border 1px soilder black 宽度 实线 黑色
盒子大小计算方式,margin + border +padding+内容
display 和浮动
div 空的块标签 span 空的行内标签
display:inline-block;修改行或块特性,两个都用表示都有
display:none; 设置成没有