html入门学习---css基础（1）
第一章 css小姐
1.1 css基础语法
基本格式: {属性1:值1; 属性2 : 值2 }
eg：width：宽
height：高
background：背景色
宽和高的长度单位：
- px----> 像素
2.%—> 百分比
eg：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>docuemnt</title>
</head>
<style>
div{ width: 50% ;height: 10px; background-color :rgb(255, 0, 43)}
span{width: 50% ;height: 10px; background-color :rgb(0, 204, 255)}
</style>
<body>
<div>这是一个块</div>
<span>这是一v开通</span>
</body>
</html>
注意
div或span的表示与前面所定义的一致。
1.2 css样式的引入方式
1 内部样式：style标签
<div style="width:100% ;height: 50px; background-color :rgb(89, 0, 255)">这是另外一个块</div>
2 内联模式：在body外添加，即 style属性
<style>
div{ width: 50% ;height: 10px; background-color :rgb(255, 0, 43)}
span{width: 50% ;height: 10px; background-color :rgb(0, 204, 255)}
</style>
- 外部样式
引入一个单独的css文件，name .css.
通过link标签引入外部资源，rel属性指定页面和资源的关系，href属性资源的地址。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./common.css">
<title>Document</title>
</head>
<body>
<div>这是一个块</div>
</body>
</html>
外部输出的代码书写
1.3 css颜色表示法
1. 单词表示法：red，green…
2. 十六进制表示法：#000000 #ffffff
3. rgb三原色表示法： rgb(255,255,255)红绿蓝表示, 取值范围0~255.
获取颜色工具：
下载地址 https://www.baidufe.com/fehelper
(需要翻墙)
还可以用ps提取
<style>
div{ width:50px; height: 50px ; background-color: blue;}
</style>
</head>
<body>
<div style="background-color:red; width: 100px; height:100px">这是一个块</div>
<div>这是另外一个块</div>
</body>
1.4 css背景样式
1. backeground-color 背景色
2. backgground-image 背景图
url（背景地址）
默认：将整个背景铺满
3. background-repeat： 平铺方式
repeat-x/y x/y轴铺满
no-repeat 都不铺平，原照片大小
4. background-position: 背景位置
x y ：number（px或%）
单词
x：left ，center，right
y：top ，center，bottom
5. background-attachment :背景图随滚动条移动的方式
scroll ：默认值（背景位置是按照当前元素偏移）即：在定义的背景移动
fixed：背景位置是按照浏览器进行偏移的
eg：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document</title>
<style>
body{max-width: max-content;}
div{ width : 1000px ; height: 1000px; background-color:aqua;
background-image: url(./-3d9c5e6c3d9f803b.jpg);
background-repeat: no repeat;/*repeat-x 或repeat-y*/
background-position: 50% 50%;/*或数字*/
background-attachment:fixed;/*scroll */
}
</style>
</head>
<body>
<div>这是一个大宝贝</div>
</body>
</html>
1.5 视觉差容器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1{ width:1400px ; height:1440px; background-image: url(./1.jpg.jpg); background-atttachment: fixed ; }
#div2{ width:1400px ; height:1013px; background-image: url(./2.jpg.jpg); background-atttachment: fixed ; }
#div3{ width:1440px ; height:1920px; background-image: url(./3.jpg.jpg); background-atttachment: fixed ; }
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
1.6 css边框
- border-style: 边框样式
solid ：实线
dashed ：虚线
dotted：点线- border-width：边框大小 …px
- border-color：边框颜色
transparent：透明色
边框也可以针对某一边进行单独设置：border-left/right/top/bottom-style：四种调节方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* div{width:300px; height: 300px; border-style:solid; border-color:aqua;border-width:10px;}*/
div{ width:300px; height:300px; border-right-color:rgb(78, 44, 121); border-right-style:dashed;border-width:10px;}
</style>
</head>
<body>
<div>zjejand</div>
</body>
</html>
1.7 设计三角形
<style>
body{background-color:rgb(35, 102, 168)}
div{width:0px; height:0px;
border-top-style:solid;
border-top-color:red;
border-top-width:100px;
border-bottom-style:solid;
border-bottom-color:transparent;
border-bottom-width:100px;
border-left-style:solid;
border-left-color:transparent;
border-left-width:100px;
border-right-style:solid;
border-right-color:transparent;
border-right-width:100px;
}
1.8 css文字样式
- font-family:字体类型：
中文字体，英文字体。
font-weight：字体粗细。
family-size：文字大小；默认为16px。一般设置为偶数
family-style：字体样式
写法：单词（*normal正常*；italic，oblique 斜体）
区别：italic 具有倾斜条件的才可以；oblique：都可以。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{ font-family:monospace,'Time New Roman',宋体；}
</style>
</head>
<body>
<div>这是一个块</div>
<p>这是一个表</p>
<div>这是一个块</div>
<p>这是一个表</p>
</body>
</html>
1.9 css段落
1. text-decoration：文本修饰
下划线： underline；
删除线：line-through；
上划线：overline；
不加装饰: none；
>注：可以添加多个修饰
2. text-transform：文本大小写（针对英文段落）
小写：lowercase；
大写：uppercase；
只针对首字母大写：capitalize
<style>
/* p{ text-decoration:underline overline line-through;} */
p{text-transform:uppercase;}
</style>
</head>
<body>
<p>asdawdaAaAA</p>
</body>
3.text-indent： 文本缩进(首行缩进)
em单位：1em始终与所规定大小一致
4. text-align：文本对齐方式
left, right; center ; justify（两头对齐）
<style>
/* p{ text-decoration:underline overline line-through;} */
/* p{text-transform:uppercase;} */
p{text-align: center;width: 1000px;}
</style>
</head>
<body>
<p>所谓扩散算法diffusion是指先将一幅画面逐步加入噪点，一直到整个画面都变成白噪声。记录这个过程，然后逆转过来给AI学习。
AI看到的是什么?一个全是噪点的画面如何一点点变清晰直到变成一幅画，AI通过学习这个逐步去噪点的过程来学会作画。</p>
</body>
</html>
5. line-height：定义高；
默认行高：不是固定的，而是变化的，跟着字体的大小在不断变化。
6.letter-spacing：字之间的间距
word-spacing：词之间的间距（针对英语段落）
可能会出现的问题
可以利用：
1.word-break：break-all(非常强烈的折行)
2.word-wrap ：break-word（没有那么强，会产生一些空白区 ）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document</title>
<style>
/* p{ text-decoration:underline overline line-through;} */
/* p{text-transform:uppercase;} */
/* p{text-align: center;width: 1000px;} */
p{width:300px; height:300px; border:1px solid red;word-wrap: break-word;}
</style>
</head>
<body>
<p>所谓扩散算法diffusion是指先将一幅画面逐步加入噪点，一直到整个画面都变成白噪声。记录这个过程，然后逆转过来给AI学习。
AI看到的是什么?一个全是噪点的画面如何一点点变清晰直到变成一幅画，AI通过学习这个逐步去噪点的过程来学会作画。</p>
<p>asjbdilqukwFIUDQWdfuvwaEFEWASFVBAESWHJK.FVEWVFEJOUVfeiouy;vwFIUYEVWIUWEEIOQUWgfreiouw4tfg</p>
</body>
</html>
1.10 css复合样式
复合的写法是通过空格的方式实现的，复合写法有的是不需要关心顺序的如下：
background：red url（）repeat 0 0；
border：1px red solid；
有的需要关心顺序的如：
如 font ：
size必须得在family前面 比如：
- weight style size family（正确）
- style weight size family（正确）
- weight style size/line-height family（正确）
注：如果非要混合写的话，那么就要先写复合样式，再写单一样式，这样样式才不会被覆盖掉。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复合形式</title>
<style>
div{width:1300px; height:1500px;
background: burlywood url(./1.jpg.jpg) center center no-repeat;
border:2px rgb(97, 225, 253) solid;
font:bold italic 30px/100px ;
}
</style>
</head>
<body>
<div>
这是一个复合形式
</div>
</body>
</html>
1.11css选择器
ID选择器：#elem{}
html:id=“elem”
ID选择器注意事项：
1、在一个页面中，ID值是唯一的
2、命名规范，字母_-数字（命名的第一位不能是数字）
3、命名方式
驼峰式 ：searchButtom（小驼峰：第二个单词首字母大写），SearchButtom（大驼峰：两个单词首字母都大写）
下划线式：search_small_buttom
短线式：search-small-buttom
<style>
#div1{background:gray;}
#div2{background:yellowgreen;}
</style>
</head>
<body>
<div id="div1">wadiopj</div>
<div id="div2">awuoid</div>
1.12CLASS选择器
css：elem{}
html：class=“elem”
注：
1、class选择器是可以复用的。
2、可以添加多个class样式。
3、多个样式的时候，样式的优先级根据css决定，而不是class属性中的顺序
4、标签+类的写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.text-blue {
color: blue;
}
.text-green {
color: green;
}
</style>
</head>
<body>
<p class="text-blue">黄河远上白云间</p>
<p class="text-green">一片孤城万仞山</p>
<p class="text-blue">羌笛何须怨杨柳</p>
<p class="text-green">春风不度玉门关</p>
</body>
</html>
扫一扫
1854
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
