2020-12-23

                  **

css的基础用法及其常用的元素

**

CSS 层叠样式表（Cascading Style Sheets） 一般用于修饰html5 html等
1.语法
body｛font-size：10px；｝
body为选择器 font-size为属性 10px为值 大括号内的全部称为声明。
2.引入方式
有4种 分别是 内嵌式，外链式，行内式，嵌入式4种
优先级最高的是行内式 它可以覆盖前面相同的属性 其他几种优先级需看排放顺序。一般外链式最常用。




外链式和嵌入式需要另外写一个css文件 并引入地址，格式与内嵌式格式相同 我们接下来的例子都使用内嵌式 这个比较常用。
3.选择器
①.id选择器 如body中的元素h1后加一个id=“one”，在style里用#one｛｝来表示该标签 相当于一个取名字的效果（独有的效果）。
②.如果在元素后面加class=“one” 在style种用.one｛｝来表示，class代表分类的意思 这一类型的都具有。
③.在style种*｛｝来表示多html中所有标签进行作用。
④.伪类（控制连接的颜色） 如a标签 a：link｛｝表示未访问的 a：visited｛｝表示已访问的 a：hover｛｝表示鼠标指向它时的 a：active｛｝点击后的。顺序要遵从link visited hover active如果顺序不正确可能无法正常显示
⑤.包含选择符 例如在一个id为one的div中的p标签 在style中可用#one p｛｝来表示对p标签进行改动，在one和p之间要空格 这是标志。
⑥.分组选择符 多个选择符同时具备 h1，div，body｛｝用，将选择符分开。
⑦.指定选择符有两个相同标签的情况下给其中一个取名（用id选择器）在style中用标签加#名称的形式来写如两个h1 一个无id 一个有id为one 那么这么写h1#one｛｝。

class和id的名称可以自定义。
3.css中的一些特点。子元素会继承父元素的样式和属性，如想把body中的p标签文字变大 在body中后加属性即可。如子元素与父元素相同的样式和属性，则子元素会覆盖掉父元素。
4.盒子模型 这是一个重点 后面会经常用到 各大网站的界面也都使用到了盒子模型 也就是div。
div 分区的意思其后可用class或者id取名其中的元素有很多我主要介绍几个常用的

要注意几点 如果你忘了定义盒子的宽 高那么系统自动默认给0 将不会显示，一定要记得定义，其次 以后网页都是很多个盒子或者盒子中套盒子 所以内边距就是里面的盒子的边框与外面的盒子的边框距离 称为外面那个盒子的内边距 成为里面那个盒子的外边距。如果margin后面跟一个数字代表上下左右都为这个值 如果有两个值 前者为上下 后者为左右 3个值 前者为上 中为左右 后者为下 如果写四个就分别是上下左右 当然也可以分开写。
border 的用法除了在后加数值定义边框粗细以外 还可以在数值后加solid red 等 可以改变边框的颜色。
5.块状元素和内联元素
如p div等标签是块状元素 不允许其他元素同行 有宽高默认display：block；
如a span等标签是内联元素 允许其他元素同行 没宽高默认display：inline；
上述二者可以转换将block或者inline修改即可
display：none；可以隐藏元素。





之间的间隙可以自己调整对其 在这里建在写style的内容时最前面最好加上一个*｛margin：0；padding：0；｝这样整个页面都不会有白色的空隙。
6.浮动布局（很重要）
float：left或者right 左浮或者右浮。clear：both；清除两边的浮动 也可加left或者right清除一边的。

程序和上面的是一样的只是改了个float。

这里为什么绿色的方块没有了呢 可以这样理解 因为红色的方块加了float向左上方浮动 相当于浮起来了 而绿色的没有 所以绿色的顶了上去 而红色的浮起来了所以把绿色的挡住了。
右浮同样如此


这里当两个同时右浮时会横向排列而不是在他下方。
如果红色的不浮动 另外两个浮动那么会是这样的

7.定位 position。
默认的的position是static（静态的），absolute 绝对定位 relative 相对定位 这两者之间的区别在于 absolute是相较于body的位置 而relative是相较于父级的位置 然后加像素即可调整位置

8.overflow溢出
默认元素 visible 有auto（必要时剪切或者显示滚动条，当图像比盒子大的时候）hidden（不显示超出范围的内容） scroll （总是显示滚动条）
这个也可以自己试试看看效果 图太多 就做个auto的示范了解下滚动条的位置和存在形式一看就知道了




接下来几个可以自己尝试一下。

9.background 控制背景
介绍几个新的内容以及常用的 一般我们用img引入图片 但可能会导致那个图片比较死板 只能调整大小等简单的东西 而background-image：url（地址）；可以在css中引入图片不用img

这里position后面也可以用像素来改变位置更加具体。




加边框为了更清楚的看到区别。fixed需要自己试试是个动态情况无法展。
10.zoom 用于设置对象的缩放比例。
默认的是normal 一般直接用数字来表示 zoom：1；表示正常大小2表示放大两倍 可以用小数更加精确的变换大小。
再介绍几个有用的标签
line-height 行高，可用百分数也可用em15%=1.5em
font-weight字体粗细 有normal bold
text-indent 文本缩进 其后写像素值 （可以为负值） 可以用于隐藏标题（这里提醒一下 每一个html都一定要有标题 不然搜索器很难找到 但为了美观要隐藏标题就用这个）
margin：0 auto；盒子居中
text-align文本居中
text-decoration：none；去掉链接的下划线
隐藏元素的方式：display：none； width：0；height：0； overflow：hidden；三种方式。

css3

css3是css的升级版 市场上很常用。优化了很多东西。补充一些新的东西。
1.补充前面border的以及阴影的设置
border-radius 圆角边框 用法如下
border：1px solid red；
border-radiu：2px；
这样就能使4个角落变成圆的。当然也可以单独改变某个角落的形状如border-top-left-radius border-bottom-right-radius这样类似的改法来写。
box-shadow 用于添加阴影

写法如图 最后一个inset用的比较少 一般只用前5个元素即可。
text-shadow 文本阴影和上面这个差不多 用法相似可以自己试试。
2.background-size 调整背景大小 background-origin 规定背景图片定位区域，这个也不太常用 但有时还是会使用到 由于这个不好展示我就从网上截了个屏 帮助理解

在background-origin后写三个元素之一可以做到将背景图放在不同的位置。
3.word-wrap可以强制换行 例如如果超出盒子范围的单词可以被强制拆分开使整个界面看起来比较饱满 没有空白。@font-face用来修饰字体



可以按照这上面的元素去调整写法如图 效果可以自己取试试 我没有文字文件所以没有发图。
4. transform 2D和3D二者相似 3D比2D多了几个元素仅此而已所以放在一起。（要注意不同浏览器要加不同的前缀 可以百度一下）

3d的元素只是在xy基础上多了个z 要定义三个值

写法大致如此由于未知原因 效果图没展示出来 可能浏览器问题。所以只能自己试试 还有个matrix()可以把所有数据写在一个括号里 以后熟练后可以这么用 但对于我们这样的新手还是分开写较好 知道每个值对应的意义。
3d同理
也有几个新的元素 transform-origin：x-axis y-axis z-axis；定义图片初始位置位于xyz轴的位置。transform-style：flat || preserve-3d；表示子元素是否保留3d位置 前者为不保留。
perspective 规定透视效果（填数字来定义）perspective-origin：x-axis y-axis ；定义透视效果的图片在xy轴上的位置。
5.transition 过渡，一般用于伪类hover中效果最佳。过度一般用于美化页面。


写法大致如此 需要写两个框架 以此来达到变化的目的 每一组变化元素用逗号隔开 组内元素用空格间隔，可以在秒数后加另外两个元素。
6.动画效果animation同上面的@font-face需要用到引用。

这是常用的6个属性还有3个不常用的 如果想了解可以到w3c上去查看。具体用法上图

这里引用名为uzi的动画效果后加的是变化时长 可以自己设定，在时长后方可以加上剩下的元素 调整效果 除了播放次数外都和过渡的元素是相同的效果 可以自己试试看。
css的大概到这里就结束了 还有很多小的知识点 或者说还有些不常用的都可以到w3c上去查查看 里面有详细的讲解 谢谢各位的浏览。