目录
什么是 CSS?
1-CSS语法规则
2-样式表
外部样式表
内部样式表
行内样式表
3-选择器
4-背景
4.1 颜色定义方式
4.2 背景图像
5-文本
5.1 文本颜色
5.2 文本对齐方式
5.3 文本装饰
5.4 文本转换
5.5 文本首行缩进/间距
6-字体
6.1 字体系列
6.2 字体样式
6.3 字体大小
6.4 字体粗细
7-链接
8-盒子模型(Box Model)
8.1 边框
8.2 轮廓
8.3 边距
9-尺寸
10-可见性
11-定位
什么是 CSS?
-
CSS：层叠样式表(Cascading Style Sheets)。
-
作用：美化网页，装饰网页样式。
1-CSS语法规则
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
-
选择器通常你需要改变样式的 HTML 元素。
-
声明=1属性+1值，每个属性有一个值。属性和值被冒号分开。
CSS 实例 CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来:
p {color:red;text-align:center;}
格式化一下(增强可阅读性)
<head>
<meta charset="utf-8">
<title>CSS规则Or段落</title>
<style>
p {
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>前端开发涉及到多种工具，用于提高开发效率、优化代码、测试应用程序等。</p>
<p>这个段落采用CSS样式化。。</p>
</body>
2-样式表
外部样式表
把写好的样式放在同级目录的另一个文件夹里，使用时只需要写一个link标签引入在编辑器里即可，他真正意义上做到了结构与样式完全分离。可以控制根目录里的所有页面。
内部样式表
主要位于<head>部分，利用<style>标签定义，可以说他做到了结构与样式分离但也没完全分离。可以控制一个页面里的多个元素。
行内样式表
作用在一行里，它通过标签的style属性来设置元素样式。注意这里不是style标签！可以控制一个页面里的一行元素。
3-选择器
常见几种选择器写法:
p {
color: red; //作用于<p>元素，上面有例子
}
* {
color: red; //通用选择器作用于整个页面
}
#xx {
color: red; //id选择器作用于<id="xx".......>的元素
}
.xx {
color: red; //类选择器作用于<class="xx"......>的元素,选择有特定 class 属性的 HTML 元素
}
body {
background-color: blueviolet; //body选择器作用于页面body部分，设置背景颜色
}
选择器不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
<head>
<meta charset="utf-8">
<title>id和class选择器</title>
<style>
#sccp {
text-align: center;
color: red;
}
body{
background-color: blueviolet;
}
.panda{
color: aqua;
}
.center{
text-align: center;
}
</style>
</head>
<body>
<h2>没有修饰的h2</h2>
<p id="sccp">这个段落采用id选择器</p>
<p class="panda">这个段落采用class选择器</p>
<p class="panda center">这个段落采用组合class选择器</p>
</body>
4-背景
用于定义HTML元素的背景
-
background-color:设置元素的背景颜色。
-
background-image:把图像设置为背景。
-
background-repeat:设置背景图像是否及如何重复。
-
background-attachment:背景图像是否固定或者随着页面的其余部分滚动。
-
background-position:设置背景图像的起始位置。
#sccp {
color: red;
}
body{
background-color: blueviolet;
}
4.1 颜色定义方式
-
十六进制 - 如："#ff0000"
-
RGB - 如："rgb(255,0,0)"
-
颜色名称 - 如："red"
4.2 背景图像
设置背景图。默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。
<head>
...
<style>
body {
background-image:url('src/bg.png');
}
</style>
</head>
...
背景其他属性
<style>
body {
background-color: blueviolet;
background-image: url('src/bg.png');
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
}
</style>
高效写法
body {
background: blueviolet url('src/bg.png') no-repeat center top fixed;
}
当使用简写属性时，属性值的顺序为:
-
background-color
-
background-image
-
background-repeat
-
background-attachment
-
background-position
以上属性无需全部使用，你可以按照页面的实际需要使用。两种写法效果是一样的。
基本上所有的属性都可以类似于这样的简写.
5-文本
5.1 文本颜色
这个跟上面的背景色一样的设置，通用的。
-
十六进制 - 如："#ff0000"
-
RGB - 如："rgb(255,0,0)"
-
颜色名称 - 如："red"
5.2 文本对齐方式
-
居中:center
-
左对齐:left
-
右对齐:right
-
两端对齐:justify
<head>
...
<style>
h1 {
text-align: center;
}
p.right {
text-align: right;
}
p.justify {
text-align:justify;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p class="right">右对齐，嘿嘿嘿</p>
<p class="justify">两端对齐，哈哈哈哈。......识点！</p>
</body>
</html>
5.3 文本装饰
用来设置或删除文本的装饰
<head>
<meta charset="utf-8">
<title>背景</title>
<style>
...
a {text-decoration:none;}
h2 {text-decoration:overline;}
h3 {text-decoration:line-through;}
h4 {text-decoration:underline;}
</style>
</head>
<body>
....
<a href="https://shuaici.blog.csdn.net/">帅次</a>
<p >跳转至: <a href="https://shuaici.blog.csdn.net/">帅次</a></p>
<h2>text-decoration:overline</h2>
<h3>text-decoration:line-through</h3>
<h4>text-decoration:underline</h4>
</body>
不建议强调指出不是链接的文本，因为这常常混淆用户。
5.4 文本转换
-
字母全转大写
-
字母全转小写
-
首字母大写
<head>
<style>
......
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head>
<body>
......
<p class="uppercase">ni shi da shauai ge</p>
<p class="lowercase">NI shi DA shauai GE</p>
<p class="capitalize">ni shi da shauai ge</p>
</body>
5.5 文本首行缩进/间距
<head>
<style>
.......
p.text-indent{text-indent: 50px;}/*首行缩进*/
p.letter-spacing{letter-spacing: 3px;}/*字母间距*/
p.line-height{line-height: 2.5;}/*行高2.5倍*/
p.text-shadow{text-shadow: 2px 2px 5px red;}/*水平阴影--垂直阴影--模糊效果--颜色*/
</style>
</head>
<body>
......
<p class="justify">两端对齐，哈哈哈哈。CSDN博客专家....识点！</p>
<p class="text-indent letter-spacing line-height text-shadow">两端对齐，哈哈哈哈。CSDN博客专家....识点！</p>
......
</body>
6-字体
6.1 字体系列
在CSS中，有两种类型的字体系列名称：
-
通用字体系列 ：拥有相似外观的字体系统组合（如 "Serif" 或 "Monospace"）
-
特定字体系列 ：一个特定的字体系列（如 "Times" 或 "Courier"）
<head>
<style>
p.serif {font-family: "Times New Roman", Times, serif;}
p.sansserif {font-family: Arial, Helvetica, sans-serif;}
</style>
</head>
<body>
<p class="serif">这是 Times New Roman</p>
<p class="sansserif">这是 Arial, Helvetica, sans-serif</p>
</body>
如果字体系列的 名称超过一个字，它必须用引号 ，如Font Family："Times New Roman"。多个字体系列是用一个逗号分隔指明。
6.2 字体样式
-
正常(normal)：正常显示文本
-
斜体(italic)：以斜体字显示的文字
-
倾斜的文字(oblique)：文字向一边倾斜（和斜体非常类似，不推荐使用）
<head>
<style>
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</style>
</head>
<body>
<p class="normal">这是正常normal。</p>
<p class="italic">这是斜体italic。</p>
<p class="oblique">这是斜体oblique。</p>
</body>
6.3 字体大小
font-size 属性设置文本的大小，字体大小的值可以是绝对或相对的大小。你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。
-
绝对大小：
-
设置一个指定大小的文本
-
不允许用户在所有浏览器中改变文本大小
-
确定了输出的物理尺寸时绝对大小很有用
-
-
相对大小：
-
相对于周围的元素来设置大小
-
允许用户在浏览器中改变文字大小
-
如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）。
<head>
<style>
p.px30 {font-size:30px;}
p.em1875{font-size:1.875em;} /* 30px/16=1.875em */
p.bai240{font-size:240%;} /* 使用百分比 */
</style>
</head>
<body>
<p class="px30">这是30px。</p>
<p class="em1875">这是em1875。</p>
<p class="bai240">这是240%。</p>
</body>
在所有浏览器的解决方案中，设置 <body>元素的默认字体大小的是百分比。使用浏览器调整文本的大小时，字体大小显示会有异常，推荐使用百分比设置。
6.4 字体粗细
-
normal 默认值。定义标准的字符。
-
bold 定义粗体字符。
-
bolder 定义更粗的字符。
-
lighter 定义更细的字符。
-
100~900 具体数字
定义由细到粗的字符。400 等同于 normal，而 700 等同于 bold。 inherit 规定应该从父元素继承字体的粗细。
<head>
<style>
p.weight{font-weight:800}
p.lighter{font-weight:lighter}
</style>
</head>
<body>
<p class="bai240 weight">这是240%+weight800。</p>
<p class="bai240 lighter">这是240%+lighter。</p>
</body>
7-链接
链接状态
-
a:link 正常，未访问过的链接
-
a:visited 用户已访问过的链接
-
a:hover 当用户鼠标放在链接上时
-
a:active 链接被点击的那一刻
注： a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。注： a:active 必须在 a:hover 之后。
<style>
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#0000FF;} /* 已访问链接 */
a:hover {color:#00FF00;} /* 鼠标移动到链接上 */
a:active {color:#FF0000;} /* 鼠标点击时 */
</style>
<p >未访问链接： <a href="https://blog.csdn.net/g984160547/article/details/135680716?spm=1001.2014.3001.5501">孔子曰：帅次</a></p>
<p >已访问链接： <a href="https://shuaici.blog.csdn.net/">孔子曰：帅次</a></p>
<p >鼠标移动到链接上： <a href="https://shuaici.blog.csdn.net/">孔子曰：帅次</a></p>
同理，background-color和text-decoration也可以根据链接状态进行设置。
8-盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，box model这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
<head>
<style>
div {
background-color:antiquewhite;
width: 250;
border: 25px solid red;
padding: 25px;
margin: 25px;
}
</style>
</head>
<body>
<div>这里是盒子模型。内边距 25px，外边距 25px， 边框红色。</div>
</body>
8.1 边框
border-style 属性用来定义边框的样式。样式比较多，下面就简单列几种
<head>
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>
<p class="none">无边框。</p>
<p class="dotted">虚线边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="mix">混合边框</p>
</body>
8.2 轮廓
-
outline：在一个声明中设置所有的轮廓属性
-
outline-color
-
outline-style
-
outline-width
-
inherit
-
-
outline-color：设置轮廓的颜色
-
color-name
-
hex-number
-
rgb-number
-
invert
-
inherit
-
-
outline-style：设置轮廓的样式，跟边框相似，就不列啦。
-
outline-width：设置轮廓的宽度
-
thin
-
medium
-
thick
-
length
-
inherit
-
<head>
<style>
p.outline {
border: 1px solid red;
outline-style: dotted;
outline-width: 3px;
}
</style>
</head>
<body>
<p class="outline">混合轮廓。CSDN博客专家，华云云享专家，专注Android开发多年，分享一些你需要的小知识点！</p>
</body>
8.3 边距
-
margin(外边距)：属性定义元素周围的空间。
-
margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。
-
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
-
-
adding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。
-
当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。
-
单独使用 padding 属性可以改变上下左右的填充。
-
<head>
<style>
p {
background-color: yellow;
}
p.padding {
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
}
p.margin {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 50px;
margin-left: 50px;
}
</style>
</head>
<body>
<p class="padding">混合轮廓。CSDN博客专家，华云云享专家，专注Android开发多年，分享一些你需要的小知识点！</p>
<p class="padding margin">混合轮廓。CSDN博客专家，华云云享专家，专注Android开发多年，分享一些你需要的小知识点！</p>
</body>
9-尺寸
允许你控制元素的高度和宽度。同样，它允许你增加行间距。
-
height：设置元素的高度。
-
line-height：设置行高。
-
max-height：设置元素的最大高度。
-
max-width：设置元素的最大宽度。
-
min-height：设置元素的最小高度。
-
min-width：设置元素的最小宽度。
-
width：设置元素的宽度。
10-可见性
-
visibility:hidden可以隐藏某个元素，但占用空间。 -
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。
<head>
<style>
p.none {
display:none;
height: 100px;
width: 80;}
p.hidden {
visibility: hidden;
height: 100px;
width: 80;
}
p.visible {
background-color: chocolate;
visibility: visible;
height: 100px;
width: 80;
text-align: center;
}
</style>
</head>
<body>
<p>元素可见性:none(隐藏且不占位置)</p>
<p class="none">none</p>
<p>元素可见性：hidden</p>
<p class="hidden">hidden</p>
<p>元素可见性：visible</p>
<p class="visible">visible</p>
</body>
11-定位
position 属性指定了元素的定位类型。
position 属性的五个值：
-
static：静态定位，元素不会受到 top, bottom, left, right影响。
-
fixed：相对于浏览器窗口是固定位置。
-
relative：相对定位元素的定位是相对其正常位置进行移动。相对定位元素经常被用来作为绝对定位元素的容器块。
- absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于
<html>。-
absolute 定位使元素的位置与文档流无关，因此不占据空间。
-
absolute 定位的元素和其他元素重叠。
-
- sticky：粘性定位，悬浮。
-
注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。
-
<head>
<style>
p.static {
position: static;
border: 3px solid red;
top: 20px;
left: 50px;
}
p.fixed {
position: fixed;
top: 40px;
right: 40px;
}
p.relative {
position: relative;
top: -30px;
color: red;
}
p.absolute {
position: absolute;
left: 120px;
top: 120px;
}
p.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p class="static">这是position: static，不受top: 20px，lef：50px影响</p>
<p class="fixed">这是position: fixed</p>
<p>占位专用</p>
<p class="relative">这是position: relative</p>
<p>占位专用</p>
<p class="absolute">这是position: absolute</p>
<p class="sticky">这是position: absolute</p>
<p >More</p> 。。。。。。
</body>
效果图1：
效果图2：
相关推荐
HTML 入门手册(一)
HTML 入门手册(二)
CSS 入门手册(二)
