如何学习CSS?
- CSS是什么?
1.1 什么是CSS?
CSS:Cascading Style Sheet 层叠级联样式表,CSS 表现(美化网页)
1.2 发展史
- CSS1.0
- CSS2.0 DIV(块)+CSS,HTML与CSS结构分离的思想,网页变得简单
- CSS2.1 浮动,定位
- CSS3.0 圆角,阴影,动画
- CSS怎么用? (快速入门)
css代码写在< style>标签中,< link>标签外链css
不分离写法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css入门</title>
<!--css的style标签推荐写到head中-->
<!--
css选择器
语法:选择器{
声明;
}
-->
<style>
h1{
background-color: aqua;
}
</style>
</head>
<body>
<h1>我是一个标题</h1>
</body>
</html>
分离写法(推荐):
h1{
color: bisque;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css入门（分离写法）</title>
<link rel="stylesheet" href="css1.css">
</head>
<body>
<h1>我是一个标题</h1>
</body>
</html>
2.1 CSS优势:
- 内容和表现分离
- 网页结构表现统一,可以实现复用
- CSS样式十分丰富
- 建议使用独立于html的css文件
- 利于SEO,容易被搜索引擎收录
2.2 CSS的三种导入方式:
- 行内样式
<!--行内样式-->
<h1 style="color: aqua">我是一个标题</h1>
- 内部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css入门</title>
<!--css的style标签推荐写到head中-->
<!--
css选择器
语法:选择器{
声明;
}
-->
<style>
h1{
background-color: aqua;
}
</style>
</head>
<body>
<h1>我是一个标题</h1>
</body>
</html>
- 外部样式 (调用顺序遵循就近原则)
h1{
color: bisque;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css入门（分离写法）</title>
<!--外链式-->
<link rel="stylesheet" href="css1.css">
<!--导入式-->
<style>
@import "css1.css";
</style>
</head>
<body>
<h1>我是一个标题</h1>
</body>
</html>
- CSS选择器(重点+难点)
作用:选择页面上的某一种或某一个元素
3.1. 基本选择器
id选择器>类选择器>标签选择器
- 标签选择器
- 类选择器
- id选择器
<style>
<!--标签选择器-->
标签名{
}
<!--类选择器-->
.类名{
}
<!--ID选择器-->
#id名{
}
</style>
3.2. 层级选择器
- 后代选择器 空格
- 子选择器 >
- 相邻兄弟选择器 + 只选择同辈紧邻的下一个
- 通用选择器 ~ 选择下面所有同辈
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层级选择器</title>
<style>
/*后代选择器 选择所有后代中符合条件的*/
body li{
font-size: 30px;
}
/*子选择器*/
body>rl{
font-size: 30px;
}
/*相邻兄弟选择器*/
#pp+p{
font-size: 30px;
}
/*相邻兄弟选择器*/
#pp~p{
font-size: 30px;
}
</style>
</head>
<body>
<p id="pp">1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<rl>
<li>
<p>6</p>
<p>7</p>
</li>
</rl>
</body>
</html>
3.3. 结构伪类选择器
- 在普通选择器后加上:进行具体的判断
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结构伪类选择器</title>
<style>
/*选中body儿子中的第一个p标签元素*/
body>p:first-child{
color: aqua;
}
/*选中body儿子中的最后一个p标签元素*/
body>p:last-child{
color: red;
}
/*选择p的父类中的第一个子p*/
p:nth-child(1){
color: yellow;
}
/*选择p的父类中的第二个子p*/
p:nth-last-of-type(2){
color: yellow;
}
/*超链接伪类选择器hover*/
a:hover{
color: aqua;
}
</style>
</head>
<body>
<p id="pp">1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<rl>
<li>
<a>6</a>
<a>7</a>
</li>
</rl>
<p>8</p>
<p>9</p>
<p>10</p>
</body>
</html>
3.4. 属性选择器(常用)
格式:
标签 [属性名 = 属性值 ]{
}
- =绝对相等
- *=包含
- 可以使用正则规范
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
/*name属性为aa的a标签变天蓝色*/
a[name=aa]{
color: aqua;
}
/*href属性包含a的a标签变红*/
a[href*=a]{
color: red;
}
/*href属性以e开头的变绿*/
a[href^=e]{
color: green;
}
/*href属性以j结尾的变粉*/
a[href$=j]{
color: pink;
}
</style>
</head>
<body>
<p>
<a href="bb" name="aa">1</a>
<a href="abc">2</a>
<a href="abcd">3</a>
<a href="efg">4</a>
<a href="ehij">5</a>
</p>
</body>
</html>
- 美化网页(文字, 阴影,超链接,列表,渐变…)
4.1. 为什么要美化网页?
- 有效传递页面信息
- 美化网页,页面漂亮才能吸引用户
- 凸显页面主题
- 提高用户体验
< span>标签:重点要突出的字,使用span套起来
4.2. 字体样式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体样式</title>
</head>
<style>
p{
font-size: 字体大小;
font-family: 中文字体样式 (英文字体样式);
color: 字体颜色;
font-weight: 字体宽度;
}
</style>
<body>
<p>我是一个标题</p>
<p>ABCDEFG</p>
</body>
</html>
4.3. 文本样式
- 颜色: color rdb rgba
- 文本对齐方式: align-content: center;
- 首行缩进: align-content: center;
- 行高: line-height: 10px;
- 装饰: text-decoration-line
- 文本对齐方式: vertical-align: middle;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本样式</title>
<style>
/*颜色*/
#p1{
color: red;
}
/*文本对齐方式*/
#p2{
align-content: center;
}
/*首航缩进*/
#p3{
text-indent: 2em;
}
/*
行高
line-height:height
*/
#p4{
line-height: 10px;
}
/*
文本装饰
下划线
*/
#p1 {
/*中间划线*/
text-decoration-line:line-through;
}
#p2{
/*上划线*/
text-decoration-line:overline;
/*取消划线*/
text-decoration-line:none;
}
#p3{
/*下划线*/
text-decoration-line:underline;
}
/*水平对齐*/
/*两个标签内容对齐*/
#p4{
标签1,标签2{
vertical-align: middle;
}
</style>
</head>
<body>
<p id="p1">我最喜欢这句：我看见你酷酷的笑容也有腼腆的时候。</p>
<p id="p2">夏天的风第一次听就觉得会循环-</p>
<p id="p3">“你和萤火虫有两个共同点，在我的眼里都会发光，同时，都已经很多年没见了。”</p>
<p id="p4">叮叮咚咚的声音就像那萤火虫在敲着小鼓，只有你能听见，也只有我能与你共享。清风明月，岁月正好。夜晚的凉风拂过你的面庞，湖边的你眉眼带笑。</p>
<p id="p5">萤火虫是什么样的？很可惜我从来没见过…</p>
</body>
</html>
4.4. 阴影
- text-shadow:颜色 垂直偏移 竖直偏移 阴影半径
4.5. 超链接伪类
/*超链接伪类选择器hover(常用)*/
a:hover{
color: aqua;
}
4.6.列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
<!--外链样式-->
<link rel="stylesheet" href="css12.css">
</head>
<body>
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
</body>
</html>
li{
/*
列表样式
none: 无
circle: 空心圆
decimal: 数字排序
square: 正方形
*/
list-style: none;
}
4.7. 背景background
body{
/*背景颜色*/
background-color: aqua;
/*背景图片*/
background-image:url("image/a.jpg");
/*图片布局方式*/
background-repeat: repeat-x;/*沿着x轴平铺*/
/*背景图片可以通过坐标定位*/
background-position: 10px,1px;
}
4.8. 渐变
- 具体css样式可以去开源网站找,此处不多赘述
- 盒子模型
5.1.什么是盒子模型?
- margin 外边距
- - padding 内边距
- border 边框
- 边框的粗细
- 边框的颜色
- 边框的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
#div1{
/*边框宽窄*/
border-width:1000px;
/*边框颜色*/
border-color: aqua;
/*边框形式*/
border: solid;
}
h2{
/*
外边距
auto自动对齐
*/
margin: auto;
/*上下左右*/
margin-top: 110px;
margin-left: 0px;
margin-right: 0px;
/*内外边距同理*/
}
</style>
</head>
<body>
<div id="div1">
<form action="#">
<div>
<span>用户名</span>
<input type="text" name="uname">
</div>
<div>
<span>密 码</span>
<input type="password" name="upwd">
</div>
</form>
</div>
</body>
</html>
盒子计算方法:margin+border+padding+内容宽度
5.2. 圆角边框
- 可以用来调各种各样的图像,有些软件的原型头像就是这么调的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆角边框</title>
<style>
div{
width: 100px;
height: 50px;
border-color: aqua;
border: 10px;
border: solid;
}
#div1{
border-radius: 10px;
}
#div2{
/*四角顺时针*/
border-radius: 10px 20px 10px 20px;
}
#div3{
/*圆的圆角=边框宽度的一半*/
border-radius: 50px;
}
#div4{
/*半径=长方形的高 ,半圆形 上面两个是圆角 下面两个是方角*/
border-radius: 50px 50px 0px 0px;
}
</style>
</head>
<body>
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<div id="div4">
</div>
</body>
</html>
5.3. 盒子阴影
/*阴影的相关大小面积 颜色*/
box-shadow: 10px 10px 1px yellow;
- 浮动
6.1.display 一种行内排列元素的方式但一般用float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display</title>
</head>
<style>
#div1{
width: 100px;
height: 50px;
border-color: aqua;
border: 10px;
border: solid;
}
a{
width: 100px;
height: 50px;
border-color: aqua;
border: 10px;
border: solid;
/*将行内元素转换成块元素*/
display: block;
/*块元素转化成行内元素*/
display: inline;
/*即时块元素又是行内元素*/
display: inline-block;
}
</style>
<body>
<div id="div1">
<!--块元素-->
</div>
<a>行内元素</a>
</body>
</html>
6.2.float浮动
float: top;
float: left;
float: right;
float: end;
清除浮动
/*清除两侧浮动,使其既有块元素效果又有浮动效果(可以只清除单侧)*/
clear: both;
clear: none;
clear: left;
clear: right;
6.3. 父级边框塌陷问题
- 通俗的说,就是图片外的框框没有把图片完整框住的问题
-
增加父级元素的高度
-
增加一个空的div,清除浮动
-
/*若内容超出指定框范围,自动设置滚动条*/ overflow: scroll; 或者overflow: hidden -
在父类添加一个伪类:after,目的是添加一个div那样的空间
父标签:after{
content: "";
display: block;
clear: both;
}
- 定位
7.1 . 相对定位
- 相对于自己原来的位置偏移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style>
div{
width: 100px;
height: 50px;
border-color: aqua;
border: 10px;
border: solid;
}
h2{
/*相对原位置定位*/
position: relative;
top: 10px;
right: 10px;
}
</style>
</head>
<body>
<div>
<h2>喵喵喵</h2>
</div>
</body>
</html>
7.2. 绝对定位
- 没有父级元素的时候相对浏览器的边框定位 当父级元素已经定位时则相对于父级元素定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
div{
width: 100px;
height: 50px;
border-color: aqua;
border: 10px;
border: solid;
position: relative;
top: 10px;
right: 10px;
}
h2{
/*
绝对定位
没有父级元素的时候相对浏览器的边框定位
当父级元素已经定位时则相对于父级元素定位
*/
position: absolute;
top: 10px;
right: 10px;
}
</style>
</head>
<body>
<div>
<h2>喵喵喵</h2>
</div>
</body>
</html>
7.3. 固定定位
/*固定定位,无论如何滑动页面始终在一个位置*/
position: fixed;
top: 10px;
right: 10px;
7.4. z-index
- z-index:数字,数字越大就越容易显现
- opacity:数字,背景透明度
- 网页动画(特效效果)[略]
3572
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
