温馨提示:这篇文章已超过436天没有更新,请注意相关的内容是否还可用!
摘要:,,本篇文章是关于CSS学习笔记的基础教程第一篇,介绍了CSS的基本概念、语法以及使用方法。文章详细解释了CSS的选择器、样式规则等基础知识,并提供了相关示例。通过学习本文,读者可以掌握CSS的基本操作和应用,为后续的网页设计和布局打下坚实的基础。
1、CSS语法
CSS 规则集(rule-set)由选择器和声明块组成:
选择器指向您需要设置样式的 HTML 元素。
声明块包含一条或多条用分号分隔的声明。
每条声明都包含一个 CSS 属性名称和一个值,以冒号分隔。
多条 CSS 声明用分号分隔,声明块用花括号括起来。
CSS body{ background-color: #EDEDED; } /* 标题h1样式 */ h1{ color: #333333; text-align: center; font-size: 20px; } /* 段落样式 */ p{ font-size: 15px; color: #666666; /* 字体 */ font-family: Verdana; }
我的第一个CSS示例
这是一个段落
2、CSS选择器
2.1 什么是CSS选择器
CSS 选择器用于“查找”(或选取)要设置样式的 HTML 元素。
我们可以将 CSS 选择器分为五类:
(1)简单选择器(根据名称、id、类来选取元素)
(2)组合器选择器(根据它们之间的特定关系来选取元素)
(3)伪类选择器(根据特定状态选取元素)
(4)伪元素选择器(选取元素的一部分并设置其样式)
(5)属性选择器(根据属性或属性值来选取元素)
2.2 CSS 元素选择器
- 元素选择器根据元素名称来选择 HTML 元素。
h1{ color: #333333; text-align: center; font-size: 20px; }
2.3 CSS id 选择器
id 选择器使用 HTML 元素的 id 属性来选择特定元素。
元素的 id 在页面中是唯一的,因此 id 选择器用于选择一个唯一的元素!
要选择具有特定 id 的元素,请写一个井号(#),后跟该元素的 id。
id 名称不能以数字开头
CSS body { background-color: #EDEDED; } #para1 { text-align: left; color: red; }
这部分受id选择器控制
2.4 CSS 类选择器
类选择器选择有特定 class 属性的 HTML 元素。
如需选择拥有特定 class 的元素,请写一个句点(.)字符,后面跟类名。
类名不能以数字开头!
CSS body { background-color: #EDEDED; } p.center{ text-align:left; color: aqua; } p.size { font-size: 20px; }
这个标题不受影响
这个段落受类选择器影响
这个段落受多个类选择器影响
运行效果:
2.5 CSS 通用选择器
- 通用选择器(*)选择页面上的所有的 HTML 元素。
CSS body { background-color: #EDEDED; } /* 通用选择器 影响页面中的每一个元素 */ *{ color: blue; text-align: center; }
这个段落受通用选择器影响
2.6 CSS 分组选择器
最好对选择器进行分组,以最大程度地缩减代码。
如需对选择器进行分组,请用逗号来分隔每个选择器。
CSS body { background-color: #EDEDED; } /* 分组选择器 */ h1,h2,p{ text-align: left; color: brown; }
Hello
你好
段落
运行效果:
3、CSS的使用
有三种插入样式表的方法:
- 外部 CSS
- 内部 CSS
- 行内 CSS
3.1 外部CSS
- 通过使用外部样式表,您只需修改一个文件即可改变整个网站的外观!
- 每张 HTML 页面必须在 head 部分的 元素内包含对外部样式表文件的引用。
- 外部样式表可以在任何文本编辑器中编写,并且必须以 .css 扩展名保存。
- 外部 .css 文件不应包含任何 HTML 标签。
Document
Hello
段落内容
baseStyle.css:
h1{ text-align: center; font-size: 20px; color: #333333; } p{ text-align: left; font-size: 15px; color: #666666; }
运行效果:
注意:请勿在属性值和单位之间添加空格(例如 margin-left: 20 px;)。正确的写法是:margin-left: 20px;
3.2 内部 CSS
body { background-color: linen; } h1 { color: maroon; margin-left: 40px; }
This is a heading
This is a paragraph.
3.3 行内CSS
行内样式(也称内联样式)可用于为单个元素应用唯一的样式。
如需使用行内样式,请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。
行内样式失去了样式表的许多优点(通过将内容与呈现混合在一起)。请谨慎使用此方法。
Document
Hello
段落内容
3.4 多个样式表
- 内部+外部+行内 多种样式一起使用
- 最终效果为最后声明的样式
- 页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表,其中第一优先级最高:
(1)行内样式(在 HTML 元素中)
(2)外部和内部样式表(在 head 部分)
(3)浏览器默认样式
示例一:此时h1的颜色为后声明的orange
Document h1{ color: orange; }
Hello
段落内容
baseStyle.css:
h1{ text-align: center; font-size: 20px; color: #333333; } p{ text-align: left; font-size: 15px; color: #666666; }
运行效果:
示例二:此时h1的颜色为baseStyle.css中定义的#333333
Document h1{ color: orange; }
Hello
段落内容
运行效果:
4、CSS 背景
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
4.1 背景颜色: background-color
- 指定元素的背景色
Document body{ background-color: orange; /* background-color: #EDEDED; */ /* background-color: rgb(255,0,0); */ } h1{ background-color: bisque; }
Hello
段落内容
运行效果:
4.2 背景图像:background-image
- 指定用作元素背景的图像。
- 默认情况下,background-image 属性在水平和垂直方向上都重复图像。
Document body{ background-image: url(imgs/login_bg.png); }
Hello
段落内容
图片资源文件为:
运行效果:
4.2.2 背景重复:background-repeat
4.2.2.1 仅在水平方向上重复:background-repeat: repeat-x;
Document body{ background-image: url(imgs/login_bg.png); /* 仅在水平方向上重复 */ background-repeat: repeat-x; }
Hello
段落内容
运行效果:
4.2.2…2 仅在垂直方向上重复:background-repeat: repeat-y;
4.2.2.3 不重复background-repeat: no-repeat;
Document body{ background-image: url(imgs/login_bg.png); background-repeat: no-repeat; }
Hello
段落内容
运行效果:
4.2.3 背景图像位置:background-position
Document body{ background-image: url(imgs/login_bg.png); background-repeat: no-repeat; background-position: left top; }
Hello
段落内容
4.2.4 CSS 背景附着:background-attachment
- 属性指定背景图像是应该滚动还是固定的(不会随页面的其余部分一起滚动)
4.2.4.1 背景固定,不随页面滚动 background-attachment: fixed;
- 页面内容滚动,图片一直位于设置的左上角
Document body{ background-image: url(imgs/login_bg.png); background-repeat: no-repeat; background-position: left top; background-attachment: fixed; } p{ font-size: 40px; }
Hello
段落内容1
段落内容2
段落内容3
段落内容4
段落内容5
段落内容6
段落内容7
段落内容8
段落内容9
段落内容10
段落内容11
段落内容12
段落内容13
段落内容14
段落内容15
段落内容16
段落内容17
段落内容18
段落内容19
段落内容20
4.2.4.2 背景不固定,随页面滚动 background-attachment: scroll;
4.3 CSS background - 简写属性
按照如下顺序进行简化:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
body { background-color: orange; background-image: url(imgs/login_bg.png); /* 重复样式 */ background-repeat: no-repeat; /* 是否随页面内容滚动 */ background-attachment: scroll; /* 位置 */ background-position: left top; }
简化为:
body{ background: orange url(imgs/login_bg.png) no-repeat fixed left top; }
4.4 所有 CSS 背景属性
5、CSS边框: border
5.1 边框种类
- dotted - 定义点线边框
- dashed - 定义虚线边框
- solid - 定义实线边框
- double - 定义双边框
- groove - 定义 3D 坡口边框。效果取决于 border-color 值
- ridge - 定义 3D 脊线边框。效果取决于 border-color 值
- inset - 定义 3D inset 边框。效果取决于 border-color 值
- outset - 定义 3D outset 边框。效果取决于 border-color 值
- none - 定义无边框
- hidden - 定义隐藏边框
p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;}
border-style 属性
此属性规定要显示的边框类型:
点状边框。
虚线边框。
实线边框。
双线边框。
凹槽边框。
垄状边框。
3D inset 边框。
3D outset 边框。
无边框。
隐藏边框。
混合边框。
运行效果:
5.2 边框宽度: border-width
- border-width 属性指定四个边框的宽度。
- 可以将宽度设置为特定大小(以 px、pt、cm、em 计),也可以使用以下三个预定义值之一:thin、medium 或 thick
边框 p.one { border-style: dotted; border-width: 5; } /* 上下边框10 左右为20 */ p.two{ border-style: double; border-width: 10px 20px; } /* 上右下左各不一样 */ p.three{ border-style:solid; border-width: 10px 15px 20px 25px; }
这个段落有边框
这个段落边框宽度不一样
这个段落边框宽度都不一样
运行效果:
5.3 边框宽度 :border-color
可以通过以下方式设置颜色:
- name - 指定颜色名,比如 “red”
- HEX - 指定十六进制值,比如 “#ff0000”
- RGB - 指定 RGB 值,比如 “rgb(255,0,0)”
- HSL - 指定 HSL 值,比如 “hsl(0, 100%, 50%)”
- transparent
边框 /* 四个边框相同宽度 */ p.one { border-style: dotted; border-width: 5; border-color: red; } /* 上下边框10 左右为20 */ p.two{ border-style: double; border-width: 10px 20px; /* 左右为粉色 山下为蓝色 */ border-color: pink blue; } /* 上右下左各不一样 */ p.three{ border-style:solid; border-width: 10px 15px 20px 25px; border-color: pink red blue black; }
这个段落有边框
这个段落边框宽度不一样
这个段落边框宽度都不一样
5.4 CSS 边框各边
- border-top-style
- border-right-style
- border-bottom-style
- border-left-style
p.one { /* border-style: dotted; */ border-width: 5; border-color: red; /* border-color: hsl(0, 100%, 50%); */ /* border-color: rgb(255, 0, 0); */ /* border-color: #ff0000; */ /* 不同边 不同样式 */ border-top-style:dotted ; border-right-style:double; border-bottom-style: groove; border-left-style: inherit; }
简化写法:
body { text-align: center; } /* 四个值 */ p.four { border-style: dotted solid double dashed; } /* 三个值 */ p.three { border-style: dotted solid double; } /* 两个值 */ p.two { border-style: dotted solid; } /* 一个值 */ p.one { border-style: dotted; }
单独的边框
四种不同的边框样式。
三种不同的边框样式。
两种不同的边框样式。
一种边框样式。
5.5 CSS 简写边框属性
border 属性是以下各个边框属性的简写属性:
- border-width
- border-style(必需)
- border-color
p { border: 5px solid red; }
或者:
p { border-left: 6px solid red; background-color: lightgrey; }
5.6 CSS 圆角边框 :border-radius
5.7 所有 CSS 边框属性
- 页面内容滚动,图片一直位于设置的左上角
- 属性指定背景图像是应该滚动还是固定的(不会随页面的其余部分一起滚动)
- 指定元素的背景色
- 通用选择器(*)选择页面上的所有的 HTML 元素。
- 元素选择器根据元素名称来选择 HTML 元素。
还没有评论,来说两句吧...