JavaWeb7——CSS 的使用

文章目录

  • 1. CSS 的概念
  • 2. CSS 层叠样式表用法
  • 3. CSS 常用选择器
    • 3.1 分类
    • 3.2 类型选择器
      • 3.2.1 ID 选择器
      • 3.2.2 类选择器
      • 3.2.3 标签选择器
    • 3.3 后代选择器
    • 3.4 伪类
    • 3.5 群组选择器
  • 4. CSS 属性
    • 4.1 font 类
    • 4.2 list-style 类
    • 4.3 text 类
    • 4.4 margins 类
    • 4.5 color 类
    • 4.6 backgroud 类
    • 4.7 border 类

1. CSS 的概念

  • 层叠样式表
- 定义
1. CSS 是 Cascading Style Sheets 的英文缩写,即层叠样式表。
2. 它是一组格式设置规则。
3. CSS 语言也是一种标记语言,不需要编译,直接由浏览器执行。
4. CSS 大小写不敏感。
5. CSS 是由 W3C 的 CSS 工作组创建和维护的。

- 作用
可用于控制 Web 页面,用于布局和美化网页。
  • CSS 优点
- 更多排版和页面布局设置
- 样式和结构分离
- 样式可以保存
- 文档更小
- 可保持 Web 文档的一致性,以方便网站维护
  • CSS 入门示例

法一:通过 style 标签设置样式


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 入门示例title>
    <style type="text/css">
        h1 {
    
            font-size: 12pt;
            color: red;
        }
    style>
head>

<body>
    <h1 style="font-size: 9pt; color:purple;">CSS 层叠样式表h1>
    <h1>CSS 层叠样式表h1>
    <h1>CSS 层叠样式表h1>
body>

html>

法二:通过 CSS 链接

css文件

h1 {
   
    font-size: 12pt;
    color: red;
}

html文件


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 入门示例title>
    

你可能感兴趣的:(trush,css)