前端-02 CSS基础

阿里云国内75折 回扣 微信号:monov8
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6

1 简介

1.1 CSS语法

  1. 语法
    在这里插入图片描述

选择器HTML元素

生命块用;隔开的各种声明 {a;b}

每条声明有CSS属性名称和值用冒号分割{属性:值;属性:值}

  1. 案例
  • 整块代码
<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            background-color: lightblue;
        }

        h1 {
            color: white;
            text-align: center;
        }

        p {
            font-family: verdana;
            font-size: 20px;
        }
    </style>
</head>



<body>

    <h1>我的第一个 CSS 实例</h1>
    <p>这是一个段落。</p>

</body>


</html>
  • 效果
    在这里插入图片描述

  • 部分代码

p {
  color: red;
  text-align: center;
}

p是选择器

color 是属性red是属性值

align也是属性center也是属性值

1.2 CSS 选择器

  1. css 元素选择器
  • 概念选择器根据元素名称来选择HTML元素

  • 实例是对页面上的所有p元素居中对齐、红色文本

p {
  text-align: center;
  color: red;
}
  1. css id 选择器
  • 概念根据HTML的元素的id属性来选择特定元素id是唯一的

  • 实例**id=“para1”**的HMTL元素

#para1 {
  text-align: center;
  color: red;
}
  1. css类选择器
  • 概念选择有特定class属性的HTML元素写法是.class
  • 实例带有 class=“center” 的 HTML 元素
.center {
  text-align: center;
  color: red;
}
  1. css通用选择器
  • 概念选择页面上的所有的 HTML 元素写法(*)
  • 实例
* {
  text-align: center;
  color: blue;
}
  1. css分组选择器
  • 概念选取所有具有相同样式定义的 HTML 元素
  • 实例
h1, h2, p {
  text-align: center;
  color: red;
}
  1. 总结
    在这里插入图片描述

1.3 CSS的使用

  1. 外部css
  • 概念只需修改一个文件
  • 实例外部样式在 HTML 页面 部分内的 元素中进行定义
<!DOCTYPE html>
<html>

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

<body>

    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>

</body>

</html>
  1. 内部css
  • 概念如果一张 HTML 页面拥有唯一的样式那么可以使用内部样式表

  • 实例在 HTML 页面的 部分内的

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            background-color: linen;
        }

        h1 {
            color: maroon;
            margin-left: 40px;
        }
    </style>
</head>

<body>

    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>

</body>

</html>
  1. 行内css
  • 概念为单个元素应用唯一的样式对单个元素
  • 实例相关元素的”style“
<!DOCTYPE html>
<html>

<body>

    <h1 style="color:blue;text-align:center;">This is a heading</h1>
    <p style="color:red;">This is a paragraph.</p>

</body>

</html>
  1. 多个样式表
  • 如果内部样式是在链接到外部样式表之后定义的走的后面内部h1是橙色
<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <style>
        h1 {
            color: orange;
        }
    </style>
</head>

在这里插入图片描述

  • 如果在链接到外部样式表之前定义了内部样式走的后面内部h1是深蓝色
<head>
    <style>
        h1 {
            color: orange;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

在这里插入图片描述

  1. 层叠顺序规则

页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表其中第一优先级最高

  1. 行内样式在 HTML 元素中
  2. 外部和内部样式表在 head 部分
  3. 浏览器默认样式

1.4 CSS的注释

  1. 注释符号
/* 这是一条单行注释 */
  1. 实例
p {
  color: red;  /* 把文本设置为红色 */
}
  1. HTML的注释
<!-- 这些段落将是红色的 -->

2 颜色

2.1 概述

  1. 颜色名称
  • 分类

Tomato、Orange、DodgerBlue、MediumSeaGreen、Gray

  • 实例
<h1 style="background-color:Tomato;">番茄色</h1>
<h1 style="background-color:Orange;">橙色</h1>
  1. 背景色
  • 使用background-color

  • 实例

<h1 style="background-color:DodgerBlue;">China</h1>
<p style="background-color:Tomato;">China is a great country!</p>
  1. 文本颜色
  • 使用color
  • 实例
<h1 style="color:Tomato;">China</h1>
<p style="color:DodgerBlue;">China is a great country!</p>
<p style="color:MediumSeaGreen;">China, officially the People's Republic of China...</p>
  1. 边框颜色
  • 使用:border
  • 实例
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
  1. 颜色值
  • 使用RGB 值、HEX 值、HSL 值、RGBA 值或者 HSLA 值
  • 实例
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

在这里插入图片描述

2.2 RGB颜色

  1. 语法
rgb(red, green, blue)
  1. 实例
rgb(255, 0, 0) 显示为红色
rgb(255, 0, 0) 显示为黑色
rgb(255, 0, 0) 显示为白色
  1. RGBA值
  • 语法

alpha 参数是介于 0.0完全透明和 1.0完全不透明之间的数字

rgba(red, green, blue, alpha)

2.3 HEX颜色

  1. 语法
#rrggbb

其中rrggbb是介于00到ff之间的十六进制值没看懂

2.4 HSL颜色

  1. 语法
hsla(hue, saturation, lightness)

色相hue是色轮上从 0 到 360 的度数。0 是红色120 是绿色240 是蓝色。

饱和度saturation是一个百分比值0 表示灰色阴影而 100 是全色。

亮度lightness也是百分比0 是黑色50 是既不明也不暗100是白色。

  1. HSLA值
hsla(hue, saturation, lightness, alpha)

alpha 参数是介于 0.0完全透明和 1.0完全不透明之间的数字

3 背景

3.1 概述

  1. 学习内容
background-color
background-image
background-repeat
background-attachment
background-position
  1. background-color
  • 概念 属性指定元素的背景色
  • 实例
body {
  background-color: lightblue;
}
  • 不透明度

使用opacity

div {
  background-color: green;
  opacity: 0.3;
}

使用rgba的alpha透明值

div {
  background: rgba(0, 128, 0, 0.3) /* 30% 不透明度的绿色背景 */
}
阿里云国内75折 回扣 微信号:monov8
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6
标签: CSS

“前端-02 CSS基础” 的相关文章