当前位置：主页 > 查看内容

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

发布时间：2021-05-24 00:00| 有 位朋友查看

简介：小高不太行之前端——CSS样式基础上 提示下篇马上问世在赶了在赶了 提示 文章目录 小高不太行之前端——CSS样式基础上 前言 一、基础知识 一插入方法【外部/内部/内联】 1.外部样式表 2.内部样式表 3.内联样式 二基本语法【选择器声明】 选择器 常规选择器……

小高不太行之前端——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
borderstyle
topcolor
bottomwidth
left–
right–

style取值

border-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
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：阿里Nacos系列——为什么要选择Nacos和Nacos的基础概念（持续更 下一篇：TensorFlow2入门指南 | 02 回归问题实战

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐