小高不太行之前端——CSS样式（基础）上
提示：下篇马上问世，在赶了在赶了
提示：
前言
浪了n周以后那个小高又回来了，要对CSS下手了，走过路过留下小心心哦
Cascading Style Sheets ,英文啥的不重要 ，记住它叫
样式表 --就是又快又美地打扮html滴
一、基础知识
（一）插入方法【外部/内部/内联】
1.外部样式表
- 创建.css文件添加样式
- 每个页面使用
<link>标签链接到样式表。<link>标签在（文档的）头部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
2.内部样式表
使用 <style> 标签在文档头部定义内部样式表
3.内联样式
对要修饰的元素，在其标签内使用 style 属性
<html>
<head>
<!-- 内部样式 -->
<style>
hr {
color:sienna;}
p {
margin-left:20px;}
body {
background-image: url(img/back6.png);}
</style>
</head>
<body>
<hr>
<hr>
<hr>
<!-- 内联样式 -->
<p style="color: aliceblue;">从前有座山,山里有座庙</p>
</body>
</html>
运行结果如下：
（二）基本语法【选择器+声明】
——>> 选择器1，选择器2，……+{声明1，声明2，……} <<——
选择器
常规选择器
-
id 选择器
给标有特定 id 的 HTML 元素添加样式， -
class 选择器
将拥有该class类的html标签同时添加相同样式 -
分组选择器
将很多具有相同样式的元素同时添加相同样式 -
嵌套选择器
因为html标签本身可以相互嵌套，因此有许多个类和标签，运用嵌套选择能更加精准的找到要渲染的元素
复合选择器
- 后代选择器(以空格 分隔)
- 子元素选择器(以大于 > 号分隔）
- 相邻兄弟选择器（以加号 + 分隔）
- 普通兄弟选择器（以波浪号 ～ 分隔）
因为已有的资源进行了细致的讲述，点击菜鸟教程/css/组合选择符了解详细信息
声明
声明就是属性和一个具体的值构成
属性千千万，对于一些常用的属性小高将在下面着重介绍哦
二、整体布局的渲染
（一） 盒子模型BOX
1.Margin(外边距) & Padding(内边距)
因为二者的属性相同，所以偷个懒
它们都只有上下左右四个属性，可以用百分比和像素单位来确定值
2.Border(边框)
任意属性I可以和属性II搭配
| 属性I | 属性II |
|---|---|
| border | style |
| top | color |
| bottom | width |
| left | – |
| right | – |
style取值
3.Content(内容)
盒子模型的内容自然由打工人填充，重点移步至[三、重要的修饰对象和属性]
（二）布局
头部区域、菜单导航区域、内容区域、底部区域。
（三）元素显示【溢出/浮动/显示】
1.溢出overflow
- visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余
内容是不可见的。 - scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
- auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
注意：一定要先设置高度，不然你的overflow属性绣出花来都没用
2. 浮动Float
-
其取值为左或右或者none
-
可以用clear 属性指定元素两侧不能出现浮动元素
有时浮动会导致元素的展示达不到理想的效果，所以需要进行控制
3.display&visiablity
下期预告 CSS样式（基础）下
转载：https://blog.csdn.net/m0_46568449/article/details/115360018
查看评论