1,什么是CSS
用于定义网页的样式,包括不同设备和屏幕尺寸的设计、布局和显示变化。
当浏览器读取样式表时,它会根据样式表中的信息格式化 HTML 文档。
2,CSS的作用优点
-
CSS 描述 HTML 元素如何在屏幕、纸张或其他媒体上显示
-
CSS 节省了大量工作。它可以一次控制多个网页的布局
3,css构成
CSS 规则由一个选择器和一个声明块组成。
- 选择器选择您要设置样式的 HTML 元素
-
No 1 简单选择器 根据名称、id、类选择元素 元素选择器
id 选择器
类选择器
通用选择器
HTML 元素
HTML 元素的 id 属性
具有特定类属性的 HTML 元素,要选择具有特定类的元素,请写一个句点 (.) 字符,后跟类名。
通用选择器 (*) 选择页面上的所有 HTML 元素。
1,一个元素的 id 在一个页面中是唯一的
2,
要选择具有特定 ID 的元素,请写入井号 (#) 字符,后跟元素的 ID。
3,类名不能以数字开头!
2 组合选择器 根据元素之间的特定关系选择元素 h1, h2, p {
text-align: center;
color: red;
}3 伪类选择器 根据某种状态选择元素 4 伪元素选择器( 选择元素的一部分并设置样式 5 属性选择器 根据属性或属性值选择元素 4,插入 CSS 的三种方式
外部 CSS 注意:不要在属性值和单位之间添加空格:
不正确(空格):margin-left: 20 px;
正确(无空格):margin-left: 20px;
<head>
<link rel="stylesheet" href="mystyle.css">
</head>必须在 head 部分的 <link> 元素中包含对外部样式表文件的引用 内部 CSS <head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>内部样式在 <style> 元素内定义,在 head 部分内。 内联 CSS <p style="color:red;">This is a paragraph.</p> 为单个元素应用独特的样式 5,注释
HTML 注释: <!--...-->
CSS 注释 : /* Set text color to red *
6,什么是响应式网页设计?
响应式网页设计使您的网页在所有设备上看起来都不错。
响应式网页设计仅使用 HTML 和 CSS。
响应式网页设计不是程序或 JavaScript。