小高不太行之前端——CSS样式 I

小高不太行

于 2021-04-09 09:05:19 发布

3967

分类专栏：前端设计文章标签： css css3 前端

本文链接：https://blog.csdn.net/m0_46568449/article/details/115360018

版权

前端设计专栏收录该内容

13 篇文章 0 订阅

订阅专栏

小高不太行之前端——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>

运行结果如下：
在html文件内插入样式示例

（二）基本语法【选择器+声明】

——>> 选择器1，选择器2，……+{声明1，声明2，……} <<——

选择器

常规选择器

id 选择器
给标有特定 id 的 HTML 元素添加样式，
class 选择器
将拥有该class类的html标签同时添加相同样式
分组选择器
将很多具有相同样式的元素同时添加相同样式
嵌套选择器
因为html标签本身可以相互嵌套，因此有许多个类和标签，运用嵌套选择能更加精准的找到要渲染的元素

复合选择器

后代选择器(以空格分隔)
子元素选择器(以大于 > 号分隔）
相邻兄弟选择器（以加号 + 分隔）
普通兄弟选择器（以波浪号～分隔）

因为已有的资源进行了细致的讲述，点击菜鸟教程/css/组合选择符了解详细信息

声明

声明就是属性和一个具体的值构成

属性千千万，对于一些常用的属性小高将在下面着重介绍哦

二、整体布局的渲染

（一）盒子模型BOX

BOX MODEL

1.Margin(外边距) & Padding(内边距)

因为二者的属性相同，所以偷个懒

它们都只有上下左右四个属性，可以用百分比和像素单位来确定值

内外边距

2.Border(边框)

任意属性I可以和属性II搭配

属性I	属性II
border	style
top	color
bottom	width
left	–
right	–

style取值

border-style

3.Content(内容)

盒子模型的内容自然由打工人填充，重点移步至[三、重要的修饰对象和属性]

（二）布局

头部区域、菜单导航区域、内容区域、底部区域。

（三）元素显示【溢出/浮动/显示】

1.溢出overflow

visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余
内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
注意：一定要先设置高度，不然你的overflow属性绣出花来都没用

2. 浮动Float

其取值为左或右或者none
可以用clear 属性指定元素两侧不能出现浮动元素
有时浮动会导致元素的展示达不到理想的效果，所以需要进行控制

3.display&visiablity

二更：【display:block】
在做图片导航的时候，发现没有加display:block 的时候，只有在代码段的
<li id="a"><a href="index.html">只有这里有文字的时候才能显示出来图片</a></li>，
而图片导航则是需要直接通过图片链接，那怎么实现呢？
因为背景图片默认是不占位置的，而网页默认visiablity属性是hidden，因此这个时候display:block 就要出场了，block属性你学会用了吗？~~不会打稀你~~