前端入门——CSS学习笔记

小虾米715
186 阅读4分钟

CSS基础内容学习笔记

1. 什么是CSS

CSS（Cascading Style Sheets，层叠样式表）是一种用于描述HTML（或XML）文档的表现形式的语言。CSS可以控制网页的布局、颜色、字体以及其他视觉和版式特性。

2. CSS的基本语法

CSS规则由两个主要部分组成：选择器和声明块。

/* 选择器 */
selector {
    /* 属性: 值; */
    property: value;
}
  • selector：选择器用于选取HTML元素。
  • property：属性是CSS可以修改的部分。
  • value：属性的值定义了属性的具体样式。

3. CSS选择器

  • 通配选择器：*，页面中所有全部标签都适用。
<h1>This is heading</h1>
<p>this is some paragraph.</p>
<style>
    color: red;
    font-size: 20px;
</style>

输出效果：

[图片.png]

  • 标签选择器：根据HTML标签选择元素，对页面中所有p标签都适用样式。
p {
    color: blue;
}
  • 类选择器：.,根据类名选择元素，可以出现多次，适用于所有类名为className。
.className {
    background-color: yellow;
}
  • ID选择器：#,根据ID选择元素,id一般是唯一的。
#idName {
    font-size: 20px;
}
  • 属性选择器：[],根据某些元素有特定属性或者属性值选定元素。

例如：input标签有一个disabled属性（表示这一项禁止输入）

<label>用户名：</label>
<input value="zhao" disabled />

<label>密码：</label>
<input value="123456" type="password" />

<style>
  [disabled] {
    background: #eee;
    color: #999;
  }
</style>

或者
<p>
  <label>密码：</label>
  <input type="password" value="123456" />
</p>

<style>
  input[type="password"] {
    border-color: red;
    color: red;
  }
</style>

输出结果：

图片.png

图片.png

  • 伪类选择器
  • 1.状态伪类：元素处于不同状态时的样式。示例：
<a href="http://example.com">
  example.com
</a>

<label>
  用户名：
  <input type="text">
</label>

<style>
#原始状态
a:link {       
  color: black;
}
#被查看后
a:visited {     
  color: gray;
}
#鼠标停留在连接上时
a:hover {
  color: orange;
}
#鼠标点击时
a:active {
  color: red;
}
#输入框聚焦时
:focus {
  outline: 2px solid orange;
}
</style>
  • 2.结构性伪类：根据元素所在的位置设置样式
<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>星球大战：原力觉醒</li>
  <li>复仇者联盟 3</li>
  <li>侏罗纪世界</li>
</ol>

<style>
li {
  list-style-position: inside;
  border-bottom: 1px solid;
  padding: 0.5em
}

li:first-child {
  color: coral
}
#最后一行没有下边框
li:last-child {
  border-bottom: none;
}
</style>

输出结果：

图片.png

  • 组合形式

图片.png

  • 选择器组：多元素用相同属性

图片.png

4. CSS属性

CSS属性定义了样式的各个方面，包括但不限于：

  • color：文本颜色。
  • background-color：背景颜色。
  • font-size：字体大小。
  • font-family：字体族。
  • margin：外边距。
  • padding：内边距。
  • border：边框。
  • width 和 height：元素的宽和高。

5. CSS作用于HTML的方法（三种）

1. 内联样式（Inline Styles）

方法： 直接在HTML元素的style属性中写入CSS。

html

<p style="color: red; font-size: 20px;">这段文本是红色的，字体大小为20px。</p>

优点：

  • 快速且简单，适合单个元素的快速样式调整。
  • 可以覆盖类和ID选择器的样式（优先级最高，除非使用!important）。

缺点：

  • 不利于维护，特别是样式较多时，代码会变得混乱。
  • 样式不能复用，每个元素都需要单独设置样式。
  • 增加了HTML文档的大小，因为样式是分散在各个元素中的。

2. 内部样式表（Internal Style Sheets）

方法： 在HTML文档的<head>部分使用<style>标签定义CSS。

html

<head>
    <style>
        p {
            color: red;
            font-size: 20px;
        }
    </style>
</head>

优点：

  • 样式定义在单个位置，方便管理和修改。
  • 样式可以在当前文档中复用。
  • 减少了HTTP请求的数量，因为样式是内嵌在HTML文档中的。

缺点：

  • 样式仅限于当前文档，不适合跨文档复用。
  • 如果样式表很大，可能会减慢页面加载速度，因为它需要在HTML解析时一起加载。

3. 外部样式表（External Style Sheets）

方法： 在单独的.css文件中定义CSS，并通过<link>标签引入HTML文档。

html

<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

优点：

  • 样式与内容分离，提高了代码的可读性和可维护性。
  • 样式可以跨多个文档复用，只需引入相同的CSS文件。
  • 减少了HTML文档的大小，因为样式被移到了外部文件。
  • 可以利用浏览器缓存，提高页面加载速度。

缺点：

  • 需要额外的HTTP请求来加载CSS文件，可能会稍微增加页面加载时间（但通常由于缓存而忽略不计）。
  • 如果CSS文件未正确加载，会影响页面的显示。

结语

CSS是控制网页样式的强大工具。通过掌握CSS基础，你可以创建出既美观又功能性强的网页。本文介绍了CSS的常用方法，如有不当之处，欢迎留言指正!

avatar
文章
阅读
粉丝