html入门学习---css基础（1）
第一章 css小姐1.1 css基础语法1.2 css样式的引入方式1.3 css颜色表示法1.4 css背景样式1.5 视觉差容器1.6 css边框1.7 设计三角形1.8 css文字样式1.9 css段落1.10 css复合样式1.11css选择器1.12CLASS选择器第一章 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
获取颜色工具：
下载地址 /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：边框大小 …pxborder-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>
如果觉得《html入门学习---css基础》对你有帮助，请点赞、收藏，并留下你的观点哦！
