HTML5教程
WEB前端开发--3（CSS样式）
WEB 前端开发--3（CSS样式）
1. CSS概述
HTML：网页的内容 CSS：内容的样式
CSS：Cascading Style Sheets 层叠样式表
内容和样式分离，易于修改样式
1.1 CSS语法
选择器中的行语句以分号结束
选择器：p{} 注释： /*注释*/
p{
font-size:12px; /* 字号*/
color:blue; /*颜色*/
font-weight:bold; /*加粗*?
}
1.1.1 CSS 添加方法——行内
<p style="color:red">
天使投资指早期投资，尤其指个人早期投资
</p>
1.1.2 CSS添加方法——内嵌
写在head标签内，对当前页面的所有p标签有效
<head>
<style type="text/css">
p{
color:red;
}
</style>
</head>
1.1.3 CSS添加方法——单独文件
外部样式表文件
style.css
p{
color:red; /*设置文字颜色*/
}
h1{
color:blue;
}
1.htm
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css"> link:css 自动扩展
</head>
<body>
<p>内容</p>
</body>
</html>
单独文件优点：
页面结构HTML代码与样式CSS代码完全分离
维护方便
如果需要改变网站风格，只需要修改公共CSS文件
可以在同一个HTML文档内部引用多个外部样式表、
1.1.4 CSS添加方法——优先级
1. 多重样式可以重叠，可以覆盖
2.样式的优先级按照就近原则
3.行内样式>内嵌样式>连接样式>浏览器默认样式
2.CSS 选择器
2.1 标签选择器
CSS文件:
<style type="text/css">
body{
bacground-color:#ccc;
text-align:center;
font-size:12px;}
h1{font:"黑体"; font-size:20px;}
p {color:red; font-size:16px}
hr {width：200px}
}
</style>
HTML文件：
<body>
<h1> 标题 </h1>
<hr>
<p>正文的段落</p>
版权所有
<body>
2.2 class类别选择器
点开头 px:pixel 像素
CSS文件：
<style type="text/css">
p {font-size:12px;}
.one{font-size:18px;}
.two{font-size:24px;}
</style>
HTML文件：
<body>
<p class="one"> 类别1</p>
<p class="one"> 类别1</p>
<p class="two"> 类别2</p>
<p class="two"> 类别2</p>
<p> 普通段落中的文字</p>
</body>
2.3 ID选择器
CSS文件：
<style type="text/css">
#one{font-size:12px;}
#two{font-size:24px;}
</style>
HTML文件：
<body>
<p id="one"> 文字1 </p>
<p id="two"> 文字2 </p>
</body>
2.4 嵌套声明：
空格隔开表示嵌套，内部也需要嵌套使用
CSS文件：
<style type="text/css">
p span{
color:red;
}
</style>
HTML文件：
<body>
<p><span>天使投资</span>是投资方式的一种</p>
</body>
2.5 集体声明
逗号隔开，表示采用同一种样式
CSS文件：
<style type="text/css">
h1,p {text-align:center; }
</style>
HTML文件：
<body>
<h1>欢迎访问论坛</h1>
<p>欢迎访问论坛</p>
</body>
2.6 全局声明
* 开头，针对所有的网页元素
<style type="text/css">
* {text-align:center; }
</style>
2.7 关于混合使用
多个class选择器混用，用空格分开
<div class="one yellow left"> ... </div>
id和class选择器混用：
<div id="my" class="onr yellow my">...</div>
id选择器只能被引用一次，所以不要多次使用也不要同时使用
3. CSS样式
3.1 文本字体类型样式
常用单位：
px——像素
em——1em：一个字符 2em：两个字符 自适应用户所使用的字体
%——百分比 相对于父层的样式*m% 得到子层数据
颜色：
rgb(x,x,x) 取值：0~255
rgb(x%,x%,x%) 取值：0%~100%
rgba(x,x,x,x) a取值：0~1 0为完全透明 1 为完全不透明
#rrggbb 十六进制数 ：红色#ff0000
文本：
color——文本颜色——上文已述
letter-spacing——字符间距——2px -3px
line-height——行高——14px 1.5em 120%
text-align——对齐——center left right justify(两端对齐)
text-decoration——装饰线——none overline underline line-through
text-indent——首行缩进——2em
字体：
font——在一个声明中所有字体属性——font：bold 18px ’幼圆‘
font-family——字体系列——font-family："Hiragino Sans GB" "Microsoft YaHei" "sans-serif"
(给了多个字体，则从前往后搜索，直到搜索到有的作为默认字体)
font-size——字号——14px 120%
font-style——斜体——italic
font-weight——粗体——bold
简化font写法：
font：斜体 粗体 字号/行高 字体;
font：italic bold 16px/1.5em '宋体';
3.2 CSS 背景样式
背景属性：空元素需要先定义元素的高度和宽度 height、width
backgroud-color：颜色
backgroud-image： url("logo.jpg") 背景图片
background-repeat：repeat 水平垂直重复填充
repeat-x 只填充横向一行
repeat-y 只填充纵向一列
no-repeat 只显示一次
简化background写法：
background：颜色 图片 repeat
例子：
div{
height:30px;
width:60px;
background: url("images/bgi.gif") repeat-x
}
3.3 CSS超链接样式
： —— 伪类选择器
链接的四种状态：
a:link——普通的、未被访问过的链接
a:visited——用户已访问的链接
a:hover——鼠标指针位于链接的上方悬停
a:active——链接被点击的时刻
顺序：
a:hover 必须在a:link和a:visited之后
a:active 必须在a:hover之后
口诀：LOVE & HATE
L——link V——visited H——hover A——active
举例：
a:link{
text-decoration:none;
color:#09f; /* 未访问*/
}
a:visited{
text-decoration:none;
color:#930; /*已访问*/
}
a:hover{
text-decoration：underline;
color:#03c; /*鼠标悬停*/
}
a:active{
text-decoration:underline;
color:#03c; /*按下鼠标*/
}
## 超链接动态效果设定，即鼠标悬停放大字体:
CSS文件：
a{
font-size:22px;
}
a:hover{
font-size:120% /*鼠标悬停变为1.2倍大小*/
}
HTML文件：
<a href="#"> websign </a>
3.4 CSS列表与表格样式
无序列表ul和有序列表ol共用样式：
list-style——所有用于列表的属性设置于一个声明中
list-style-image——为列表项标志设置图像
list-style-position——标志的位置
list-style-type——标志的类型
list-style-type具体取值：
无序列表：
none——无标记
disc——默认。标记是实心圆。
circle——标记是空心圆
square——标记是实心方块
有序列表：
decimal——标记是数字
lower-roman——小写罗马数字
upper-roman——大写罗马数字
lower-alpha——小写英文字母
upper-alpha——大写英文字母
lower-Greek——小写希腊字母
lower-latin——小写拉丁字母
upper-latin——大写拉丁字母
life-style-position：
CSS文件：
<style type="text/css">
.inside{
list-style-position:inside;
}
.outside{
list-style-position:outside
}
</style>
HTML文件：
<ul class="inside">
<li> HTML——网页结构</li>
<li>CSS——网页样式</li>
<li>JS——网页交互</li>
</ul>
<ul class="outside">
<li> HTML——网页结构</li>
<li>CSS——网页样式</li>
<li>JS——网页交互</li>
</ul>
结果：
list-style-image:
可以规定列表的标号是图片，起到美化界面的效果。
list-style-image: url("images/bullet1.gif");
3.5 CSS表格样式
表格大小：width,height 宽高
table{width:500px;height:200px;}
表格边框：border boder-collapse属性：合并表格和单元格边框样式
table,td,th{border:1px solid #eee;}
table{boder-collapse:collapse;} 使表格边框和单元格边框重叠
奇偶选择器：nth-child(odd|even) 例如隔行显示不同的颜色
表头单元格th单独设置即可
tr:nth-child(odd){ } tr表示行，odd表示奇数，#EAF2D3设置绿色
4.CSS布局与定位
4.1 盒子模型
概念：页面中所有元素都可以看成一个盒子content，占据着一定的页面空间
content内容 padding 内边距 border 边框 margin 外边距
其中padding，border，margin 都有四个子属性：
-top -bottom -left -right
一个盒子的实际宽度、高度：content+padding+border+margin
例子：
CSS文件：
<html>
<head>
<style type="text/css">
#box{ # id选择器，只能使用一次
width:100px;
height:100px;
border:1px solid:
padding:20px;
margin:10px;
}
</style>
</head>
HTML文件：
<body>
<div id="box">
内容内容内容...
</div>
</body>
当内容溢出盒子边框时，overflow属性取值：
hidden：超出部分不可见
scroll：显示滚动条
auto：如果有超出部分，显示滚动条
border属性子属性：
border-width：px、thin、medium、thick
boder-style：dashed(虚线)、dotted(点线)、solid(单实线)、double(双实线)
border-color：颜色
简写border： width style color
水平分割线：
.line {
height:1px;
width:500px;
border-top:1px solid #e5e5e5
}
padding属性：
padding取值：px,%(相对于外层盒子)
首先，对浏览器默认设置清0
* {
margin:0;
padding:0;
}
margin属性：
margin:1px; = margin:1px 1px 1px 1px
margin: top right bottom left 上右下左——顺时针顺序
若省略后两个值，则代表上下相等，左右相等
margin的合并：垂直方向合并（那个边距大选哪个 ），水平方向不合并
水平居中：
图片、文字居中：text-align:center;
div水平居中：margin:0 auto;
举例：假设有一个大盒子newsimglist 现要往盒子里放三张图片
首先需要消除浏览器默认文字间隙：
#newsimglist{
font-size:0; /*否则图间有间隙*/
}
然后用嵌套选择器定义每幅图片：
#newsimglist img{
height:100px;
width:100px;
margin-left:5px;
border:1px solid #0cf
padding:5px;
}
4.2 CSS定位机制
CSS中，存在3种定位机制：文档流定位，浮动定位，层定位
文档流定位为默认定位
4.2.1 文档流定位
所有的元素从上到下，从左到右依次排列。
元素分类：block、inline、inline-block
元素类型可以通过display属性进行转换
block类型元素
block元素特点：1.独占一行 2.元素的height、width、margin、padding都可设置
常见block类型元素：<div> <p> <h1>...<h6> <ol> <ul> <table> <form>
将元素显示为block元素：
a{
display：block；
}
inline元素a转换为block元素，从而使a元素具有块状元素特点（独占一行）
inline类型
inline类型特点：1.不独占一行 2.width、height 不可设置 3.width就是它包含的文字或图片的宽度，不可改变
常见的inline元素：<span> <a>
将元素显示为inline元素：
div{
display:inline;
}
inline元素的间距问题：元素之间默认有间隙，处理起来比较麻烦，一般采用转化为block
inline-block类型
顾名思义，即同时具备inline元素，block元素的特点
inline-block类型特点：1.不单独占用一行 2.元素的height、width、margin、padding都可设置
常见inline-block类型元素：<img>
显示为inline-block元素：display：inline-block;
4.2.2 浮动定位float
div实现横向多列布局
float属性：left——左浮动 right——右浮动 none——不浮动
div{
width:200px;
height:200px;
border:1px solid red;
float:left;
}
<div id="box1"></div>
<div id="box2"></div>
此时box1和box2已经水平排列。
float属性特点：此处用几张图来说明
clear属性：
clear取值：
both——清除左右两边的浮动
left和right——清除一个方向的浮动
none默认值，不清除浮动
如上图，clear：right之后右边不能有浮动，故另开一行。
# footer{
clear:both;
}
4.2.3 层定位
像图像软件中的图层一样可以对每个layer能够精确定位操作
postion属性：static——文档流 fixed——固定定位 relative——相对定位 absolu——绝对定位
position——fixed
相对于浏览器窗口进行定位，不会随浏览器窗口的滚动条滚动而变化，总在视线里
#fix-box{
width:200px;
height:200px;
border:1px solid red;
position:fixed;
left:100px; /*距离浏览器左侧的距离*/
top:50px; /*距离浏览器顶部的距离*/
}
position——relative
定位为relative的元素脱离正常的文档流中，但其在文档流的位置依然存在（下一个static不会取代）
relative定位的层总是相对于其直接父元素，无论其父元素是什么定位方式
#relative-box{
position:relative;
top:20px;
left:20px;
}
position——absolute
定位为absolute的层脱离正常文本流，但与relative的区别在于原位置不再存在（下一个static会取代）
对于absolute定位的层总是相对于其最近的定义为absolut或relative的父层，而这个父层并不一定是其直接父层
#absolute-box{
position:absolute;
top:20px;
left:20px;
}
若所有父层都为定义absolute或relative，则其将相对body进行定位
注意：值可以为负数，负数即超出父盒子，起到扩展的作用
relative+absolute
结合使用，例如广告的图片和图片上的文字
div{
border:1px solid red;
color:#fff
}
#box1{
width:170px;
height:190px;
position:relative;
}
#box2{
width:99%;
position:absolute;
bottom:0;
}
5.CSS3
5.1圆角边框border-radius
border-top-left-radius——左上角的形状
border-top-right-radius——右上角的形状
border-bottom-left-radius——左下角的形状
border-bottom-right-radius——右下角的形状
取值：1. 水平值 2.垂直值
若只有一个取值，则认为水平垂直方向取值相同
div{
height:100px;
width:150px;
border:1px solid blue;
border-top-left-radius:40px 20px;
border-bottom-right-radius:20px;
}
常用：
1.四个方向都做圆角（做出半圆）
div{
width:350px;
height:50px;
border:2px solid #a1a1a1;
border-radius:25px; /*四个角都做圆角,且是高度的一半*/
}
2.利用圆角边框做出圆形：只需半径为高度和宽度的一半即可
5.2 阴影box-shadow：
box-shadow取值:
inset——水平位移 垂直位移 模糊距离 颜色；
inset——可选，内部阴影
outset——默认值，外部阴影
div{
width:300px;
height:100px;
background-color:#f90;
box-shadow:10px 10px 5px #888 /*水平 垂直 模糊距离 颜色*/
}
文本与文字：
text-shadow：水平偏移 垂直偏移 阴影大小 颜色
若省略阴影大小，则默认与文字一样大小
<h1> Web Design </h1>
h1{text-shadow:2px 2px #FF0000}
h1{text-shadow:2px 2px 4px #FF0000}
描边效果：
h1{text-shadow:0 0 3px #F00}
浮雕效果：
h1{
color:white;
text-shadow:2px 2px 4px #000;
}
word-wrap属性：允许唱单词、URL强制进行换行
取值：normal——正常 break-word——换行
5.3 @font-face规则：
@font-face{
font-family: kastlerFont; 定义字体名称
src:url('fonts/kastler.ttf'), 定义字体来源，逗号分隔
url('fonts/kastler.eot'),
url('fonts/kastler.woff'),
url('fonts/kastler.svg');
}
p{
font-family:kastlerFont; 引用字体
}
5.4 2D转换方法：
对元素进行旋转、缩放、移动、拉伸
transform属性：rotate()——旋转 scale()——缩放
transform:rotate(x)
#rotateDiv{transform:rotate(30deg);} 正值，顺时针旋转30度（若负值则为逆时针）
transform:scale(x,y) x:水平方向缩放倍数 y:垂直方向缩放的系数 0-1为缩小，大于1为放大
box:hover{transform:scale(1.2);} 鼠标悬停时图片缩放
5.5 过渡transition
将元素的某个属性从"一个值"在指定的时间内过渡到"另一个值"
transition取值：属性名 持续时间 过渡方法
transition-property——属性名|all 对哪个属性进行变化
transition-duration——持续时间
transition-timing-function——过渡使用的方法（函数）
取值：linear 匀速
ease 慢快慢
ease-in 慢快
ease-out 快慢
ease-in-out 慢快慢
div{
hetght:30px;
width:100px;
line-height:30px;
border-radius:5px;
color:#000;
background-color:silver;
transition:all 1s linear
}
div:hover{
color:white;
background-color:#45B823
}
<div>web sign</web>
5.6 animation动画：
(1) 定义动画： @keyframes规则
(2) 调用动画： animation属性
@keyframes mycolor{ /*定义关键帧*/
0% {background-color:red;} 最开始播放
30% {background-color:blue;}
60% {background-color:yellow;}
100% {background-color:green;} 播放完成
}
div:hover{
animation:mycolor 5s linear;
}
animation属性取值：
animation-name: 引用@keyframe动画的名称
animation-duration: 动画完成时间
animation-timing-function: 规定动画速度曲线，与transition取值相同。默认是"ease"
animation-play-state: running(播放)|paused(停止) 鼠标悬停播放动画，鼠标移出不再播放
5.7 3D变换
transform属性：transform-style:preserve-3d
transform属性：rotateX() rotaeY() rotateZ() 角度deg
perspective属性：像素值越小，离舞台越近；像素值越大，离舞台越远
二维变换，无透视。三维变换，有透视
3D变换通常将要变换的元素嵌套：舞台>父容器>内容
父容器->旋转
transform-style:preserve-3d;
transform:rotateY(60deg)
舞台->透视关系
perspective:100px; 眼睛到舞台的距离
举例:
<div id="stage">
<div class="box x">
<img src="frog.jpg">
</div>
<div class="box y">
<img src="frog.jpg">
</div>
<div class="box z">
<img src="frog.jpg">
</div>
</div>
#stage{
width:300px;
margin:100px auto;
perspective:100px;
}
.box{
width:100px;
height:100px;
float:left;
transition:linear 1s;
transform-style:preserve-d;
}
box{
width:75px;
height:100px;
}
.x:hover{ transform:rotateX(60deg);}
.y:hover{ transform:rotateY(60deg);}
.z:hover{ transform:rotateZ(60deg);}
6. Sublime Text 操作：
link:css 形成链接样式表文件的代码
div#nav 生成带有id属性的标签
div.bar 生成带有class属性的标签
w30 width:30pxl;
h30 height:30px;
mg10 margin:10px;
pd5 padding:4px
lh2em line-height:2em
bgc 背景颜色
ctrl+s 保存
bdrs border-radius扩展
bxsh box-shadow扩展
transform:rotate() 旋转扩展
-
Vite多环境配置学习：新手入门教程11-24
-
实现OSS直传，前端怎么实现？-icode9专业技术文章分享11-23
-
在 HTML 中怎么实现当鼠标光标悬停在按钮上时显示提示文案？-icode9专业技术文章分享11-22
-
html 自带属性有哪些？-icode9专业技术文章分享11-22
-
Sass教程：新手入门及初级技巧11-21
-
Sass学习：初学者必备的简单教程11-21
-
Elmentplus入门：新手必看指南11-21
-
Sass入门：初学者的简单教程11-21
-
前端页面设计教程：新手入门指南11-21
-
Elmentplus教程：初学者必备指南11-21
-
SASS教程：从入门到实践的简单指南11-21
-
前端页面设计项目实战：新手入门教程11-21
-
Elmentplus项目实战：从入门到简单应用11-21
-
Sass项目实战：新手入门教程11-21
-
ElementPlus资料入门教程：轻松上手组件库11-21
