天涯论坛

 找回密码
 立即注册
搜索
查看: 77|回复: 2

CSS基本知识整理

[复制链接]

3046

主题

3万

回帖

9606万

积分

论坛元老

Rank: 8Rank: 8

积分
96065856
发表于 2024-6-30 05:03:59 | 显示全部楼层 |阅读模式

1 什么是CSS?

CSS一般叫作为CSS样式表或层叠样式表(级联样式表),重点用于设置HTML页面中的文本内容(字体、体积、对齐方式等)、照片的外形(宽高、边框样式、边距等)以及版面的布局等外观表示样式。

CSS以HTML为基本供给了丰富的功能,如字体、颜色、背景的掌控及整体排版等,况且能够针对区别的浏览器设置区别的样式。

2 CSS语法

CSS基本语法

CSS规则由两个重点部分形成选取器以及一条或多条声明。

每条声明由一个属性和一个值构成。属性(property)是设置的样式属性,每一个属性有一个值,属性和值被冒号掰开
例如 selector{property:value}

选取一般必须改变样式的HTML元素。

例如 h1{color:red; font-size:14px;} h1是选取器,color和font-size是属性,red和14px是值。

重视

倘若定义不止一个声明则必须用分号将每一个声明掰开。例如:p{text-align:center;color:red}

倘若值为若干单词,则要给值加引号: 例如:p {font-family: "sans serif";}

CSS高级语法

选取器的分组
h1,h2,h3,h4,h5,h6 { color: green; }

继承及其问题:按照 CSS,子元素从父元素继承属性。

body { font-family: Verdana, sans-serif; }

3 创建CSS

CSS 创建样式表分为三种状况

内部样式表
<head> <style type="text/CSS"> 选取器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} div{width:200px; height:200px; border:1px solid red;} </style> </head>

行内式(内联样式)

<div style="width:200px;height:100px;border:1px solid black;"></div>

外边样式表(外链式)

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

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

三种样式表区别:

行内样式表 :优点 书写方便;缺点 实现样式和结构相分离;运用状况 较少;掌控范围 掌控一个标签(少)。

内部样式表:优点 部分结构和样式相分离; 缺点 彻底分;运用状况 较多;掌控范围 掌控一个页面(中)。

外边样式表:优点 完全实现结构和样式相分离; 缺点 必须引入;运用状况 最多,举荐掌控范围 掌控全部站点(多)。

4 id和class选取

ID选取器:

id 选取能够为标有特定 id 的 HTML 元素指定特定的样式,id 属性和身份证同样拥有独一性。

HTML元素以 id 属性来设置 id 选取器,CSS 中 id 选取器以 "#" 来定义。重视: id 属性不可以数字开头。

语法: #id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

class选取器:

class 选取器用于描述一组元素的样式,叫做类选取器。

class 能够在多个元素中运用,并且一个元素能够指定多个类名。

在 CSS 中,类选取器以一个点 "." 号来定义。

一样的类名的第1个字符不可运用数字。

语法: .类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

ID 选取器和类(class)选取器的区别:

相同点:都能够应用于任何元素

区别点:

ID 选取器只能在文档中运用一次,而类选取能够运用多次。能够运用选取器词列表办法为一个元素同期设置多个样式(便是一个元素能够制定多个类名),而ID只能指定一个。

5 CSS元素选取

平常的CSS选取便是





上一篇:网页设计与制作-中国大学mooc-李阿红-李阿红-大学网课答案
下一篇:CSS基本语法(一)
回复

使用道具 举报

0

主题

1万

回帖

1

积分

新手上路

Rank: 1

积分
1
发表于 2024-8-27 21:20:56 | 显示全部楼层
这篇文章真的让我受益匪浅,外链发布感谢分享!
回复

使用道具 举报

1

主题

520

回帖

5

积分

新手上路

Rank: 1

积分
5
发表于 2024-9-5 03:13:14 | 显示全部楼层
认真阅读了楼主的帖子,非常有益。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|天涯论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-22 18:19 , Processed in 0.124829 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.