初学CSS

跟着灵神学算法

已于 2023-10-16 10:00:12 修改

阅读量33

点赞数

文章标签： css tensorflow 前端

于 2023-09-26 20:05:06 首次发布

本文链接：https://blog.csdn.net/m0_74358276/article/details/133275055

版权

一、CSS三种样式表：

内联式、行内式：将CSS样式直接写在HTML元素的style属性中。其基本语法格式如下：
```
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
```
例如：
```
<p style="color: red;">Hello World</p>
```
这种方式适用于只对当前元素应用样式的简单情况。语法中style是标签的属性，任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。
文档式、嵌入式、内嵌式：将CSS样式写在HTML文档的<style>标签内，通常位于<head>标签中。其基本语法格式如下：
```
<head>
<style type="text/CSS">
    选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
```
例如：
```
<head>
  <style style="text/CSS">
    p {
      color: red;
    }
  </style>
</head>
<body>
  <p>Hello World</p>
</body>
```
这种方式适用于对多个元素应用相同样式的情况。语法中，<style>标签一般位于<head>标签中<title>标签之后，也可以把它放在HTML文档的任何地方。

3. 外部样式表：

a. 链入式：将CSS样式写在外部的CSS文件中，然后在HTML文档中使用<link>标签引用该CSS文件。例如：

<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>Hello World</p>
</body>

在语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性：

href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type：定义所链接文档的类型。
rel：定义当前文档与被链接文档之间的关系。

b. 导入式：是将一个独立的.css文件导入HTML文档中，其是在HTML文档<head>标签中应用<style>标签，并在<style>标签中的开头处用@import语句，即可导入外部样式表文件。例如：

@import url("styles.css");

语法中，style标签内还可以存放其他的内嵌样式，@import语句需要位于其他内嵌样式的上面。

对于CSS的三种引入方式，更推荐使用外部样式表。虽然使用行间引入方式，直接对每个标签应用样式有它的优点，但是这种引入方式需要逐个地对元素设置样式，而且软件更新时需要逐个地对标签进行样式调整，可维护性差，使用内部引入方式可以通过选择器来改变元素的样式，可以重复使用代码，这样做可以提升性能。如果修改样式，只需修改一次就可以对所有设置此样式的标签同时修改，可维护性好。

主要具有以下优点：

提高了代码的可维护性，可以在多个HTML文件中重复使用相同的样式。
使HTML结构与样式分离，提高了代码的可读性。
可以通过缓存来提高网页的加载速度。

对于外部样式表中的链入式和导入式，推荐使用链入式。

虽然导入式和链接式功能基本相同，但大多数网站都是采用链接式引入外部样式表，这是因为两者的加载时间和顺序不同。加载页面时，<link>标签引用的CSS样式表将同时被加载，而@import引用的CSS样式表会等整个网页下载结束后再被加载。可能会显示无样式的页面，造成不好的用户体验。因此大多数的网站采用链接式的引入方式。

链入式的主要优点是：

更简洁，不需要额外的@import规则。
并行加载，不会阻塞页面的渲染。

正确引用外部样式表的位置是在HTML文档的<head>标签内，通常放在<title>标签之后。这样可以确保样式表在渲染页面之前加载，避免页面闪烁。

二、CSS基本选择器：

元素选择器：通过元素名称选取元素。例如：p { color: red; }，将所有 <p> 元素的文本颜色设置为红色。需要注意的是。标签选择器选择的是一类标签，而不是单独的一个以及标签选择器无论嵌套关系有多深，都能够找到对应的标签。
类选择器：通过类名选取元素。例如：.highlight { background-color: yellow; }，将所有具有 highlight 类的元素的背景颜色设置为黄色。所有的标签上都有class属性，class属性的属性值成为类名（类似于起了一个名）。类名可以由数字，字母，下划线，中划线组成，但是不能以数字开头或者中划线开头。一个标签中可以同时有多个类名，类名之间用空格隔开。类名可以重复，一个类选择器可以同时选中多个标签。
id选择器：通过id属性选取元素。例如：#header { font-size: 24px; }，将具有 header id的元素的字体大小设置为24像素。所有的标签上都有id属性。id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的。一个标签上只能有一个id属性值。因此一个id选择器只能选中一个标签。
通配符选择器：选取所有元素。例如：* { margin: 0; padding: 0; }，将所有元素的外边距和内边距设置为0。一般使用不到。

元素默认属性是指每个HTML元素在没有应用CSS样式时的默认样式。可以通过查看浏览器的开发者工具来查看元素的默认属性。通配符选择器常用于重置元素的默认样式或者设置全局样式。

三、CSS字体属性：

font-family：设置字体系列。
font-size：设置字体大小。
font-weight：设置字体粗细。可用属性值有：bold：定义粗体字符；bolder：定义更粗的字符；lighter：定义更细的字符。
font-style：设置字体样式（斜体、正常）。italic：斜体；oblique：倾斜。
font：综合设置字体样式。
@font-face规则

四、CSS文本属性：

color：设置文本颜色。
letter-spacing：字间距
word-spacing：单词间距
text-align：设置元素内文本内容的水平对齐方式。left；right；center。
```
div {
text-align: center;
}
```
text-decoration：设置文本装饰（下划线、删除线等）。underline，下划线；overline，上划线；line-through，删除线。
```
div {
text-decoration: underline;
}
```
text-transform：设置文本大小写转换。capitalize，首字母大写；uppercase，转大写；lowercase，转小写。
text-indent：设置文本首行缩进。
```
div {
text-indent: 10px;
}
```
text-shadow：阴影效果。(参数有阴影距离，模糊半径及颜色)
letter-spacing：设置字符间距。
word-spacing：设置单词间距。
white-space：设置空白字符的处理方式。pre，预处理；nowrap，不换行（除非有br）。
line-height：设置行间距。
```
p {
line-height: 26px;
}
```
text-overflow：标示对象内溢出文本。clip，修剪溢出文本；ellipsis，用”...“代替被修剪文本。