CSS基础、盒子模型

Michelle&姐姐

已于 2022-04-14 17:28:43 修改

阅读量172

点赞数

分类专栏：前端开发文章标签： html

于 2022-04-14 17:22:40 首次发布

本文链接：https://blog.csdn.net/weixin_62859027/article/details/124125148

版权

前端开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

CSS基础、盒子模型

第一部分CSS概述

一.CSS概述

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
二.CSS的基本语法

p{
font-size:12px;
color:blue;
font-weight:bold;
}

p:称为css选择器；
font-size、font-weight、color称为属性名；
12px、blue、bold称为属性值

三.CSS的应用方式

行内样式

<p style="color:blue;">这里是css</p>

内嵌样式

<head>
<style>
	p{
	color:blue;
	}
</style>
</head>
<body>
<p>这里是css</p>
</body>

外部样式表文件

外部样式表文件： style.css
p{
    color: red;      /*设置文字颜色*/
  }

<!doctype html>
<html>
<head>
<link  rel="stylesheet"  href="css/style.css" />
</head>
<body>
<p>天使投资指早期投资，尤其指个人早期投资。</p>
</body>
</html>

使用link，将css样式嵌入到html文档中

在这里插入图片描述

将css文件和html文件放在同一目录下

优点：
页面结构HTML代码与样式CSS代码的完全分离。
维护方便。
如果需要改变网站风格，只需要修改公共CSS文件。
可以在同一个 HTML 文档内部引用多个外部样式表。
四.css的优先级

1.允许对一个对象就某个样式重复定义不同的值。
2.(重复定义的)样式的优先级按照“就近原则”：行内样式> 内嵌样式> 链接样式>浏览器默认样式

五.css选择器

标签p
嵌套 p span
类别 .one
集体 p，h1
ID#left
全局*

1.标签选择器

<style type="text/css">
body{background-color: #ccc;
    text-align: center;
    font-size: 12px; }
h1{font:"黑体"; font-size:20px;}
p {color:red; font-size:16px;}
hr {width:200px;}
</style>

2.类选择器

<style>
    p {font-size:12px;}
    .one {font-size:18px;}
    .two {font-size:24px;}
</style>

应用方式：类别一

3.ID选择器

<style>
    #one{font-size:12px;}
    #two{font-size:24px;}
</style>

应用方式：文字1
id选择器具有唯一性

4.嵌套声明

<style>
  p  span {        /* p 的子元素 span */
color: red;
   }
</style>

应用方式： 天使投资 是投资方式的一种

5.集体声明

<style>
    h1, p {
                text-align: center;
     }</style>

6.全局声明

<style>
    * {
        text-align: center;
    }</style>

六.CSS单位
在这里插入图片描述
七.CSS颜色

八.CSS背景

（一个小例子）

九.CSS文本属性

字符间距letter-spacing

<style>
    h1 {letter-spacing: 2px;}
    h2 {letter-spacing: -3px;}
</style>

行高line-height，行间距：font-size

<style>
    p {
        font-size: 14px;
        line-height: 2em;
    }
</style>

对齐方式text-align

<style>
    h1 {text-align: center;}
    .date {text-align: right;}
    .main {text-align: justify;}
</style>

装饰线text-decoration

<style>
h1 {text-decoration: overline;} 
h2 {text-decoration: line-through;}
h3 {text-decoration: underline;}
</style>

在这里插入图片描述

装饰线text-decoration:去掉超链接下划线

<style>
    a{ text-decoration: none; }
</style>

文本属性总结
在这里插入图片描述

第二部分盒子模型

一.盒子模型概述
CSS认为每个元素都是一个盒子，可以通过css样式定义元素的高、宽、边框、边距等，并将盒子定位在某个位置。要先完成元素定位和页面布局以后才设计元素具体样式
在这里插入图片描述
二.盒子模型的组成

一个盒子模型的总高度、宽度：content+padding+border+margin
三.盒子模型的具体属性以及属性值

box-sizing属性：决定盒子大小的计算方式

默认取值content-box：包含width、height、padding、border、margin属性
padding-box：包含width、height、padding
border-box：包含width、height、padding、border属性

border属性：设置边框宽度、样式、颜色
padding属性：设置内容与边框之间的距离，即为内边距
margin属性：设置边框之外的空白距离

浏览器有磨人的padding和margin值，在设置之前将默认值清零
margin垂直外边距有合并

overflow：内容溢出元素边框时如何显示

visible：溢出部分正常显示
hidden：溢出部分隐藏不见
croll：显示滚动条

第三部分定位方式

定位三种方式
在这里插入图片描述
文档流定位：元素默认的定位方式，按照类似从上到下、从左到右书写文字的方式来排列的

在这里插入图片描述
浮动定位
浮动定位可以用文字环绕图片或多列布局的情况，默认情况下，块元素独占一行，如果希望几个会元素在一行上水平排列，可以采用浮动定位，浮动定位主要涉及两个属性，float属性设置浮动，clear属性清除浮动元素的影响
在这里插入图片描述

第四部分总结

这周预习的内容是CSS基础和盒子模型，相对于前面的HTML，这部分的内容不是很熟悉，也记不太清，对于CSS众多标签和设置方式需要加强记忆。对于盒子模型，只能记住大概的框架，其更加精细的设置需要多加练习。希望第三周也是收获满满的一周

Michelle&姐姐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础、盒子模型

CSS基础、盒子模型第一部分.CSS基础第一部分.CSS基础一.CSS概述层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。二.CSS的基本语法p{font-size:
复制链接

扫一扫