第一个css程序
项目结构：
html文件
Title
我是标题
css文件：
h1{
color: red;
}
CSS的优势：
- 内容和表现分离
- 网页结构表现统一，可以实现复用
- 样式十分丰富
- 建议使用独立于html的css文件
- 利于SEO，容易被搜索引擎收录
css的三种导入方式
html文件：
Title
我是标题
css文件：
/*外部样式*/
h1{
color: yellow;
}
基本选择器
- 标签选择器: 选择一类标签 格式(标签{})
Title
学java
学java
你会发财
- 类选择器:选择所有class属性一致的标签，格式(.class的值{})
Title
标题1
标题1
标题1
p标签
- id选择器:全局唯一，格式(#id的值{})
Title
标题标签
标题标签
标题标签
层次选择器
层次选择器
p1
p2
p3
-
p4
-
p5
-
p6
p7
结构伪类选择器
层次选择器
p1
p2
p3
- li1
- li2
- li3
属性选择器
Title
效果如下图:
字体样式
Title
原神
《原神》是由上海米哈游制作发行的一款开放世界冒险游戏，于2017年1月底立项 [29] ，原初测试于2019年6月21日开启 [1] ，再临测试于2020年3月19日开启 [2] ，启程测试于2020年6月11日开启 [3] ，PC版技术性开放测试于9月15日开启，公测于2020年9月28日开启 [4] 。在数据方面，同在官方服务器的情况下，iOS、PC、Android平台之间的账号数据互通，玩家可以在同一账号下切换设备。
游戏发生在一个被称作“提瓦特”的幻想世界，在这里，被神选中的人将被授予“神之眼”，导引元素之力。玩家将扮演一位名为“旅行者”的神秘角色，在自由的旅行中邂逅性格各异、能力独特的同伴们，和他们一起击败强敌，找回失散的亲人——同时，逐步发掘“原神”的真相 [5] 。
文本样式
Title
123
123122
123122
123122
原神
《原神》是由上海米哈游制作发行的一款开放世界冒险游戏，于2017年1月底立项 [29] ，原初测试于2019年6月21日开启 [1] ，再临测试于2020年3月19日开启 [2] ，启程测试于2020年6月11日开启 [3] ，PC版技术性开放测试于9月15日开启，公测于2020年9月28日开启 [4] 。在数据方面，同在官方服务器的情况下，iOS、PC、Android平台之间的账号数据互通，玩家可以在同一账号下切换设备。
游戏发生在一个被称作“提瓦特”的幻想世界，在这里，被神选中的人将被授予“神之眼”，导引元素之力。玩家将扮演一位名为“旅行者”的神秘角色，在自由的旅行中邂逅性格各异、能力独特的同伴们，和他们一起击败强敌，找回失散的亲人——同时，逐步发掘“原神”的真相 [5] 。
cececececececececece
超链接伪类
Title
￥99
列表
html文件
Title
css文件
#nav{
width: 255px;
background:#828a91;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 2em;
line-height: 35px;
/* 颜色 图片 图片位置 平铺方式*/
background: red url("../images/2.png") 230px 10px no-repeat;
}
/*
列表前面默认实心圆点
list-style ：
none 去掉圆点
circle 空心圆
decimal 数字
square 实心正方形
*/
ul li{
line-height: 30px;
list-style: none;
text-indent: 1em;
background-image: url("../images/2.png");
background-repeat: no-repeat;
background-position: 188px 5px;
}
a{
text-decoration: none;
color: #000;
font-size: 14px;
}
a:hover{
color: orange;
}
背景
Title
盒子模型
1. 边框
Title
会员登录
2.内外边距
Title
会员登录
圆角边框
1.边框圆角
Title
2.半圆
Title
盒子阴影
Title
display(块元素与行内元素的转换)
Title
div块元素
span行内元素
float(浮动)
Title
浮动的盒子可以向左浮，也可以向右浮
解决父级元素塌陷问题
父级元素塌陷问题即子元素浮动起来后超出父级元素阔起来的范围
方案一：
增加父级元素高度
方案二：
在最底下增加一个空的div，然后给该div增加属性
.clear{
clear: both;
margin: 0;
padding: 0;
}
方案三：
在父级元素增加 overflow: hidden;属性
#father{
border: 1px solid red;
overflow: hidden;
}
方案四：
父类添加一个伪类
#father:after{
content: '';
display: block;
clear: both;
}
具体代码
Title
浮动的盒子可以向左浮，也可以向右浮
相对位置
Title
第一个盒子
第二个盒子
第三个盒子
方块摆放
Title
绝对定位
Title
第一个盒子
第二个盒子
第三个盒子
固定位置
Title
div1
div2
z-index
html文件
Title
- 学习使人长寿
- 时间：2088-02-23
- 地点：冥王星
CSS文件
#content{
width: 199px;
padding: 0;
margin: 0;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border:1px solid red;
}
ul,li{
margin: 0;
padding: 0;
list-style: none;
}
/*父级元素相对定位*/
ul{
position: relative;
}
.tipText,.tipBg{
width: 199px;
height: 25px;
position: absolute;
top: 154px;
}
.tipBg{
background: #000;
opacity: 0.5; /*设置背景透明度*/
}
.tipText{
color: #f9fcf9;
/*z-index: 1;设置层级，使得字体可以在背景的上层显示 最低为0 不设上限*/
}