代码编织梦想

一、CSS(Cascading Style Sheets)

CSS指的是层叠样式表(Cascading Style Sheets),是一种用来表现HTML文件样式的计算机语言。

HTML标签用来描述网页的语义,CSS用来描述网页的样式。

二、CSS语法

CSS规则由两个主要的部分组成:选择器和声明

选择器通常是需要改变样式的HTML元素。

每条声明一个属性一个值组成。

多条声明CSS声明用分号分隔,声明块用花括号括起来

属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

 

三、CSS选择器

选择器是用来标记CSS样式能够起到的标签范围

1、id选择器(唯一标记)

id选择器使用HTML元组的id属性来选择特定的元素,元素的id在页面中是唯一的,因此的选择器用于选择一个唯一的元素

要选择具有特定的id元素,要写一个‘#’,后跟该元素的id

#parallel{
text-align:center;
color:red;
}

注意:id不能以数字开头。

2、class选择器(类选择器)

类选择器选择有特定的class属性HTML元素,如需选择特定的class元素,要写一个‘.’字符,后面跟类名

.center{
text-align:center;
color:blue;
}

注意:类名不能以数字开头。

3、html元素选择器

四、CSS的引用方式

1、外部样式表

通过使用外部样式表,只需修改一个文件即可改变整个网站的外观

每张HTML页面必须在head部分的<link>元素包含对外部样式表的引用

<!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>

外部样式表可以在任何文本编辑器中编写,并且必须以 .css 扩展名保存。

外部 .css 文件不应包含任何 HTML 标签。

"mystyle.css" 是这样的:

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

注意:请勿在属性值和单位之间添加空格。

2、内部样式表

如果一张 HTML 页面拥有唯一的样式,那么可以使用内部样式表。

内部样式是在 head 部分的 <style> 元素中进行定义。

<!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>

3、内联样式

内联样式可用于为单个元素应用唯一的样式。

如需使用内联样式,请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。

<!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>

优先级:内联样式>内部样式表>外部样式表

五、CSS注释

注释用于解释代码,浏览器会忽略注释。

位于 <style>元素内的 CSS 注释,以 /* 开始,以 */ 结束:

/* 这是一条单行注释 */
p {
  color: red;
}

注释能横跨多行:

/* 这是
一条多行的
注释 */ 

p {
  color: red;
}

六、CSS颜色的表示法

1、英文单词表示,redgreenpink等等

2、rgb表示法:rgb(255,0,0);

red/green/blue(红绿蓝),光学显示器每个像素都是由这三原色的发光原件组成,靠明亮度不同来达到显示不同颜色的效果。每个颜色取值范围0-255,共256个,即8bit,28次方。

3、16进制表示法:#FF0000;

共6位,1-2位表示red,3-4位表示green,5-6位表示blue

七、A标签的伪类

同一个标签,根据用户的某种状态不同,有不同的样式,称为“伪类

1、link 用户没有点击过的链接状态

2、visited 用户点击过的链接状态

3、hover 用户鼠标悬停到链接上的状态

4、active 用户鼠标点击且不松手之前的状态

注意:css中必须按照上述固定顺序写,否则失效

八、盒模型

所有标签都可以看做一个盒子

盒模型的五个重要属性:

1、width:内容宽度

2、height:内容高度

3、padding:内边框

 padding 属性用于在任何定义的边界内的元素内容周围生成空间。(相当于内容和盒子的距离)

通过 CSS,可以完全控制内边距(填充)。

eg:padding:10px 10px 10px 10px;(上右下左)

4、margin:外边距

margin属性用于在任何定义的边框之外,为元素周围创建空间(相当于一个和盒子和另一个盒子之间的距离)

eg:margin:10px 10px 10px 10px;(上右下左)

5、border:边框

border属性允许指定元素边框的样式,宽度和颜色(相当于盒子的厚度)

eg:border:6px soild blue(粗细,线性,颜色)

拆分:

padding:10px; 上下左右10px

padding:10px 20px; 上下10px,左右20px

padding: 10px 20px 30px 上10px 右左20px,下30px

padding-top: 10px; 上

padding-left: 20px; 左

padding-bottom: 10px; 下

padding-right: 10px;右

margin同上

1、按照方向拆开

1)border-top: 10px solid #000; 上

2)border-bottom: 10x dotted #000;下

3)border-right: 90px double #000;左

4)border-left: 90px dashed #000;右

2、按要素拆开

1)border-width: 10px 20px 30px 40x;

2)border-style: dashed solid dotted dashed;

3)border-color: red blue pink yellow;

3、按要素和方向拆开

border-bottom-color ……

盒子水平居中:

margin:0 auto;

在 CSS 中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。

假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素,就需要将内容的宽度设置为 70 像素,请看下图:

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zssxcj/article/details/127157580

web前端期末大作业 html+css+javascript网页设计实例 企业网站制作-爱代码爱编程

一、在浏览器中的运行结果: 二、部分代码 1.HTML: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>启乐官网</title> <link rel="styl

web前端基础(一)——HTML+CSS-爱代码爱编程

系列文章目录 web前端基础(一)——HTML+CSS 目录 系列文章目录 前言 HTML HTML的介绍 1. html的定义 2. html的作用 HTML的基本结构 1. 结构代码 2. 浏览网页文件 vscode的下载与使用 1. vscode 的基本介绍 2. vscode 的安装 3. vscode 的插件安装