CSS样式

最新推荐文章于 2024-09-22 13:36:41 发布

weixin_45615601

最新推荐文章于 2024-09-22 13:36:41 发布

阅读量103

点赞数

本文链接：https://blog.csdn.net/weixin_45615601/article/details/100885530

版权

引入CSS样式表

CSS可以写到那个位置？是不是一定写到html文件里面呢？
内部样式表内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其

基本语法格式如下：
<head>
<style type="text/CSS">
    选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>

1.在html5中可以省略，但一般都会写上，比较规范
2.一般放在head标签内，也可以放在其他位置

行内式（内联样式）

内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：
<标签名 style=“属性1:属性值1; 属性2:属性值2; 属性3:属性值3;”> 内容 </标签名>

外部样式表（外链式）

链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：

<head>
  <link href="CSS文件的路径" type="text/CSS" rel="stylesheet" />
</head>

link单标签，放在头部head里面
1.herf，定义外部样式文件的URL，可以是相对路径，也可以是绝对路径
2.type，所连接文档的类型，text/CSS表示是一个css文件
3.rel 定义当前文档和所链接文档的关系，在这里需要指定stylesheet，表示链接的是一个样式表文件
三种样式表总结样式表优点缺点使用情况控制范围行内样式表书写方便，权重高没有实现样式和结构的分离较少控制一个标签内部样式表部分结构和样式分离没有完全分离较多控制一个页面的标签外部样式表完全实现样式和结构的分离需要引入最多，墙裂推荐控制整个站点
标签显示模式（display）
标签的类型(显示模式)HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。具体如下：
块级元素(block-level)常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，
其中<div>标签是最典型的块元素。每个块级元素都占一行，可以设置宽高，对齐等属性，常用于网页布局和结构的搭建块级元素的特点
1.总是从新行开始
2 高度，行高，外边距及内边距都可以控制
3. 宽.度都是容器的100%
4.可以容纳内联元素和其他块级元素

行内元素(inline-level)常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，
其中<span>标签最典型的行内元素。行内元素(内联元素)并没有独立的空间，靠内容(文字，图片)来撑起结构的，一般不可以设置宽高，对齐等属性，常用域控制页面中的文本的样式
行内元素的特点:
a. 和相邻的行内元素在同一行上
b.宽高无效，单水平方向的padding，margin可以设置的，垂直的无效
c.默认宽度就是本身内容的宽度‘
d.行内元素能容文本或其他行内元素
1.链接里面不可以放链接
2.行内元素不可以放块级标签
块级元素和行内元素区别
块级元素的特点
a.总是从新行开始
b.高度，行高，外边距及内边距都可以控制
c.宽度都是容器的100%
d.可以容纳内联元素和其他块级元素

行内元素的特点:
a.和相邻的行内元素在同一行上
b.宽高无效，单水平方向的padding，margin可以设置的，垂直的无效
c.默认宽度就是本身内容的宽度
d.行内元素能容文本或其他行内元素

行内块元素（inline-block）在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
行内块元素的特点:
1.和相邻的元素(行内元素或行内块元素)在一行上，但之间会有空隙
2.默认宽度也本身内容的宽度
3.行高，宽高都可以控制
标签显示模式转换 display
块级元素转化行内元素 display:inline
行内转块级 display:block;
块级元素行内元素转行内块 display:inline-block;