【CSS学习笔记】

于 2023-06-24 12:07:15 发布
阅读量106 收藏
点赞数
文章标签： css 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63393227/article/details/131258465
版权

CSS 语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
1.选择器通常是你需要改变样式的 HTML 元素。
2.每条声明由一个属性和一个值组成。
3.属性是你想要设置的样式属性。每个属性有一个值。属性和值被冒号分开。
4.CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来:

p {color:red;text-align:center;}

为了让CSS可读性更强，每行只描述一个属性:
实例

p
{
    color:red;
    text-align:center;
}

CSS 注释
注释是用来解释你的代码，浏览器会忽略它。
CSS注释以 /* 开始, 以 */ 结束, 实例如下:
实例

/*这是个注释*/
p
{
    text-align:center;
    /*这也是一个注释*/
    color:black;
    font-family:arial;
}

**

CSS id 和 class

**
id 和 class 选择器
如果要在HTML元素中设置CSS样式，你需要在元素中设置 id 和 class 选择器。
id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 # 来定义。
实例

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

class 选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示：
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
实例

.center {text-align:center;}

也可以指定特定的 HTML 元素使用 class。
在以下实例中, 所有的 p 元素使用 class=“center” 让该元素的文本居中:
实例

p.center {text-align:center;}

多个 class 选择器可以使用空格分开：
实例

.center { text-align:center; }
.color { color:#ff0000; }

**

CSS 创建

**
插入样式表的方法有三种:
1.外部样式表
2.内部样式表
3.内联样式

外部样式表
当样式需要应用于很多页面时就采用外部样式表。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在头部：

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

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。
例子：

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}

注意：不要在属性值与单位之间留有空格，正确的写法是 “margin-left: 20px” 。

内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。使用 <style> 标签在文档头部定义内部样式表

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式
使用内联样式，需要在相关的标签内使用样式 style 属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

CSS 背景

CSS 背景属性用于定义HTML元素的背景。

CSS 属性定义背景效果:
background-color
background-image
background-repeat
background-attachment
background-position
背景颜色
background-color 属性定义了元素的背景颜色.
实例

body {background-color:#b0c4de;}

CSS中，颜色值通常以以下方式定义:
十六进制 - 如：“#ff0000”
RGB - 如：“rgb(255,0,0)”
颜色名称 - 如：“red”
实例

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

背景图像
background-image 属性描述了元素的背景图像.
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.
实例

body {background-image:url('paper.gif');}

背景图像 - 水平或垂直平铺
默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。
如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:
实例

body
{
background-image:url('图片地址');
background-repeat:repeat-x;
}

背景图像- 设置定位与不平铺
Remark 让背景图像不影响文本的排版
如果你不想让图像平铺，你可以使用 background-repeat 属性:
实例

body
{
background-image:url('图片地址');
background-repeat:no-repeat;
}

可以利用 background-position 属性改变图像在背景中的位置:
实例

body
{
background-image:url('图片地址');
background-repeat:no-repeat;
background-position:right top;
}

背景- 简写属性
为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.
背景颜色的简写属性为 “background”:

实例

body {background:#ffffff url('图片地址') no-repeat right top;}

当使用简写属性时，属性值的顺序为：

background-color
background-image
background-repeat
background-attachment
background-position

CSS 文本格式

文本颜色
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：
十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red

实例

body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

文本的对齐方式
文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐.

当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐。

实例

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

文本修饰
text-decoration 属性用来设置或删除文本的装饰。
text-decoration属性主要是用来删除链接的下划线：

实例

a {text-decoration:none;}

也可以用来装饰文字：
实例

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}

所有CSS文本属性
color 属性（设置文本颜色）
实例
不同元素设置text-color：

body {
    color:red;
}
h1 {
    color:#00ff00;
}
p {
    color:rgb(0,0,255);
}

direction 属性（设置文本方向）
实例
设置文字方向"right-to-left":

div{
    direction:rtl;
    unicode-bidi: bidi-override; 
}

letter-spacing 属性（设置字符间距）
实例
设置为h1和h2元素的字母间距：

h1 {letter-spacing:2px}
h2 {letter-spacing:-3px}

line-height 属性
实例
使用百分比设置行高:

p.small {line-height:90%}
p.big {line-height:200%}

text-align 属性
实例
h1, h2, 和 h3元素设置文本的对齐方式：

h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}

text-decoration 属性
实例
设置h1，h2，h3和h4元素文本装饰：

h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}

text-indent 属性
实例
缩进段落的第一行50像素：

p
{
text-indent:50px;
}

text-shadow 属性
实例
基本文字阴影（text-shadow）：

h1
{
    text-shadow: 2px 2px #ff0000;
}

text-transform 属性
实例
转换不同元素中的文本：

h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
p {text-transform:lowercase;}

unicode-bidi 属性
实例
重写文本：

div
{
    direction:rtl;
    unicode-bidi:bidi-override;
}

vertical-align 属性
实例
垂直对齐图像：

img
{
    vertical-align:text-top;
}

word-spacing 属性
实例
指定段字之间的空间，应该是30像素：

p
{
word-spacing:30px;
}

字体大小

font-size 属性设置文本的大小。
字体大小的值可以是绝对或相对的大小

绝对大小：
设置一个指定大小的文本
不允许用户在所有浏览器中改变文本大小
确定了输出的物理尺寸时绝对大小很有用

相对大小：
相对于周围的元素来设置大小
允许用户在浏览器中改变文字大小
注意： 如果不指定一个字体的大小，默认大小和普通文本段落一样，是16像素。

设置字体大小像素
设置文字的大小与像素：
实例

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

用em来设置字体大小
使用 em 单位代替像素。
1em和当前字体大小相等。默认的文字大小是16px。
因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em
实例

h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */

使用百分比和EM组合
设置 元素的默认字体大小的是百分比：
实例

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

CSS 链接

链接样式
链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。

这四个链接状态是：
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
实例

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

当设置为若干链路状态的样式，也有一些顺序规则：
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
文本修饰
text-decoration 属性主要用于删除链接中的下划线：
实例

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

背景颜色
背景颜色属性指定链接背景色：
实例

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

列表

在 HTML中，有两种类型的列表：
无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）
有序列表 ol - 列表项的标记有数字或字母

无序列表如下所示:
Coffee
Tea
Coca Cola
有序列表如下所示:
1.Coffee
2.Tea
3.Coca Cola

不同的列表项标记
list-style-type属性指定列表项标记的类型是：
实例

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
 
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

CSS 表格

表格边框
指定CSS表格边框，使用border属性。
实例

table, th, td
{
    border: 1px solid black;
}

折叠边框
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：
实例

table
{
    border-collapse:collapse;
}
table,th, td
{
    border: 1px solid black;
}

表格宽度和高度
Width和height属性定义表格的宽度和高度。
实例

table 
{
    width:100%;
}
th
{
    height:50px;
}

表格文字对齐
表格中的文本对齐和垂直对齐属性。
text-align属性设置水平对齐方式，向左，右，或中心：
实例

td
{
    text-align:right;
}

垂直对齐属性设置垂直对齐，比如顶部，底部或中间：
实例

td
{
    height:50px;
    vertical-align:bottom;
}

表格填充
控制边框和表格内容之间的间距，应使用td和th元素的填充属性：
实例

td
{
    padding:15px;
}

表格颜色
指定边框的颜色，和th元素的文本和背景颜色：
实例

table, td, th
{
    border:1px solid green;
}
th
{
    background-color:green;
    color:white;
}

CSS 分组 和 嵌套 选择器

**
分组选择器
在样式表中有很多具有相同样式的元素。为了尽量减少代码，可以使用分组选择器。每个选择器用逗号分隔。
实例

h1,h2,p
{
    color:green;
}

嵌套选择器
它适用于选择器内部的选择器的样式。

嵌套选择器有四个样式：
p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class=“marked” 的元素指定一个样式。
.marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式。
实例

p
{
    color:blue;
    text-align:center;
}
.marked
{
    background-color:red;
}
.marked p
{
    color:white;
}
p.marked{
    text-decoration:underline;
}

CSS 组合选择符

组合选择符说明了两个选择器之间的关系。
CSS组合选择符包括各种简单选择符的组合方式。

CSS 组合选择符中包含了四种组合方式:
后代选择器(以空格 分隔)
子元素选择器(以大于 > 号分隔）
相邻兄弟选择器（以加号 + 分隔）
普通兄弟选择器（以波浪号 ～ 分隔）

后代选择器
后代选择器用于选取某元素的后代元素。
选取所有 <p> 元素插入到 <div> 元素中:
实例

div p
{
  background-color:yellow;
}

子元素选择器
与后代选择器相比，子元素选择器只能选择作为某元素直接/一级子元素的元素。
选择了<div>元素中所有直接子元素 <p> ：
实例

div>p
{
  background-color:yellow;
}

相邻兄弟选择器
相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。
选取了所有位于 <div> 元素后的第一个 <p> 元素:
实例

div+p
{
  background-color:yellow;
}

后续兄弟选择器
后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。
选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :
实例

div~p
{
  background-color:yellow;
}

CSS 伪类

CSS伪类是用来添加一些选择器的特殊效果。
伪类的语法：

selector:pseudo-class {property:value;}

anchor伪类
链接的不同状态都可以以不同的方式显示
实例

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

注意：
1.在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
2.在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
3.伪类的名称不区分大小写。

伪类和CSS类
伪类可以与 CSS 类配合使用：

a.red:visited {color:#FF0000;}

<a class="red" href="css-syntax.html">CSS 语法</a>

如果链接已被访问，它会显示为红色。

导航栏

导航栏=链接列表
导航条基本上是一个链接列表，使用 <ul> 和 <li>元素：
实例

<ul>
  <li><a href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>

从列表中删除边距和填充
实例

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

垂直导航栏
用 <a>元素的样式，建立一个垂直的导航栏：
实例

a
{
    display:block;
    width:60px;
}

CSS 下拉菜单

基本下拉菜单
当鼠标移动到指定元素上时，会出现下拉菜单。
实例

<style>
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
  display: block;
}
</style>
<div class="dropdown">
  <span>鼠标移动到我这！</span>
  <div class="dropdown-content">
    <p>哈哈哈哈哈</p>
    <p>www.runoob.com</p>
  </div>
</div>

下拉菜单
创建下拉菜单，并允许选取列表中的某一项：
下拉菜单
实例

<style>
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
</style>
<div class="dropdown">
  <button class="dropbtn">下拉菜单</button>
  <div class="dropdown-content">
    <a href="#">哈哈哈哈 1</a>
    <a href="#">嘻嘻嘻 2</a>
    <a href="#">噢噢噢噢 3</a>
  </div>
</div>

CSS 提示工具

基础提示框(Tooltip)
提示框在鼠标移动到指定元素上显示：
例子：

<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
 
<div class="tooltip">鼠标移动到这
  <span class="tooltiptext">提示文本</span>
</div>
小严小盐
关注
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值