HTML05 CSS简介、内联和块元素

最新推荐文章于 2024-02-19 22:40:48 发布

ฅ逸魚

最新推荐文章于 2024-02-19 22:40:48 发布

阅读量123

点赞数

分类专栏： HTML+CSS 学习笔记文章标签： html css

本文链接：https://blog.csdn.net/weixin_47186832/article/details/110326172

版权

HTML+CSS 学习笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文介绍了CSS的基础知识，包括内部样式、选择器与声明块、注释规则，以及块元素与内联元素的区别。重点讲解了如何通过CSS进行元素布局和样式复用，以及如何使用link标签引入外部样式表以实现更好的结构与表现分离。

摘要由CSDN通过智能技术生成

1、CSS简介

style标签里面编写的是css样式，style外面编写的是HTML内容
- 同时，在style标签里面就不能再使用html注释了
内部样式：
- 可以将css样式编写到head中的style标签里
- 将样式表编写在style标签中，然后通过css选择器选中指定的元素
- 然后同时为这些元素设置样式，这样可以使样式进一步复用
- 而且这种方式使得结构和表现分离；推荐使用
- 这个p元素表示选中body中的所有p元素标签
css注释，必须编写在style标签里面或是css文件中
- css语法：
  - 选择器、声明块
  - 选择器：通过选择器可以选中页面中指定的元素（标签），
    - 并且将我们的声明块中的样式，应用到选择器对应的元素上
  - 声明块：声明块和选择器中间没有空格，紧在其后，使用{}括起来
    - 声明块其实就是一组一组的名值对结构（color是名，green是值），
- 这一组一组的名值对我们称为声明，在一个声明块中可以使用多个声明，
- 多个声明之间使用；隔开，声明里面的额样式名和样式值用：链接
还可以将样式表编写到外部的css样式中
- 然后通过link标签来将外部的css文件引入到当前页面中
- 这样外部文件中的css样式表将会应用到当前页面
- 将css样式统一编写到外部的样式表中，完全使结构和表现分离
- 可以使样式表在不同的页面中引用，可以最大限度的复用
- 将样式统一写在样式表中，然后通过link标签引入
- 可以利用浏览器的缓存，最推荐使用
可以将CSS样式，编写到元素的style属性当中（给谁设置设谁那里）
- 一个样式结束后，一定要添加分号，表示样式结束了
- 将样式直接编写到style属性中，这种样式被称为内联样式
- 内联样式只对当前元素的内容起作用，不方便重复使用
- 内联样式属于结构和表现耦合，不方便后期的维护，不推荐使用

<style type="text/css">
p{color:green;font-size:36px;} 
</style> 

<!--<link rel="stylesheet" type="text/css" href="006 css的外部.css"/>-->

<body>
    <p style="color:red; font-size:30px;">中二病的少年那</p>
    <p>在那遥远的天边，有一个中二少年</p>
    <p>然而有那么一天，中二少年他，疯了！</p>
</body>

2、块元素和内联元素

一般情况下只是用块元素，去包含内联元素
- 但是超链接a可以包含任意的元素，包括块元素和内联元素，但是它不能包含自己
- p元素不能包含任何其他的块元素
- 页面显示不会有问题，但是浏览器修改后回把里面的块元素摘出来
块元素和内联元素
- 块元素：
  - 所谓的块元素就是会独占一行的元素,无论内容是多少，都睡独占一行
  - 比如：p h1 h2...
  - div这个标签，没有任何语义，就是一个纯粹的块元素
  - 并且不会为它里边的元素设置任何默认的样式，
  - div标签主要是用来对其它页面进行布局的
  - 块元素主要用来页面的布局
- 内联元素1：
  - span是一个内联元素（行内元素），就是只占自身大小的元素，不会独占一行
  - span没有任何语义，而是专门用来选中文字，然后为文字设置样式
  - 常见的内联元素：a img iframe span
  - 内联元素主要用来选中文本设置样式
- 内联元素2：
  - 不能设置width和height
    - width:100px;
    - height:100px;
  - 设置水平内边距，内联元素可以设置水平方向的内边距
    - 但是他会影响布局（把其他给挤开了）
  - 设置垂直内边距，内联元素可以设置垂直方向的内边距
    - 但是不会影响布局
    - 不会吧box那个盒子挤下去，而是直接把他给覆盖了；
    - 上面多的那一部分则突出去了，在页面上看不到
  - 内联元素可以设置边框，但是垂直方向的边框不会影响到页面的布局
    - 内联元素支持水平方向上的外边距
    - 水平方向的外边距会求和,而不是重叠

<style type="text/css">
    /*盒模型的四个部分：内边距、外边距、边框、内容区*/
span{background-color:#abc;}
.box1{width:300px;height:300px;background-color:#111;}
.s1{padding:50px 100px;border:50px blue solid;margin:500px 100px;}
.s2{margin:100px;}
</style>

<body>
    <!--块元素 -->
<div style="background-color:#666; width:200px";>我是一个div</div>
<div>我是另一个div
    <p>bvncvbncvbnc</p>
</div>
<p>ncvbnvcbncvbn</p>
    <!--div标签（没有默认样式）和p标签（有默认样式），两种间距-->

    <!--内联元素-->
<span>dggadgd</span>
<span>dggadgd</span>
<span>dggadgd</span>

<span class="s1">我是一个span</span>
<span class="s2">我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
<div class="box1"></div>
</body>