CSS-learning
|
1
|
CSS,前端

@TOC

CSS规则

主要由两部分构成：选择器和声明；

h1 /*选择器*/
{	属性1：值；
    属性2：值  /*可以多个声明，每个声明由分号隔开*/
}

选择器还可以是想要设定的HTML元素，以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。ID和class属性不要以数字开头，数字开头的ID和class 在 Mozilla/Firefox 浏览器中不起作用 以class属性来设置class选择器，可以设定一组元素的样式，在 CSS 中，类选择器以一个点 . 号显示，比如

p.center {text-align:center;} /*所有的 p 元素使用 class="center" 让该元素的文本居中*/

样式表分为外部，内部和内联： 外部：当样式运用于很多页面时使用，每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部，比如

<head>
<link rel="stylesheet" type="text/css" href="样式表.css">
</head>

浏览器会从文件 样式表.css 中读到样式声明，并根据它来格式文档。 内部：当单个文档需要特殊的样式时，就应该使用内部样式表，使用<style>标签在文档头部<head>定义. 内联：仅在一个元素上应用一次，比如 <p style="what">段落。</p> 如果具有多重样式，优先级：

内联>内部>外部

如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式

CSS背景

  • background-color:
    颜色有以下定义方式：
    十六进制：如 “ff0000″
    RGB：如”rgb(255,0,0)”
    颜色名称 如”red”
  • background-image
    默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体
  • background-repeat
    background-repeat:repeat-x;（水平方向平铺）
    no-repeat;(不平铺）
  • background-attachment
  • 背景图像是否固定或者随着页面的其余部分滚动。
  • background-position
    设置背景图像的起始位置，比如background-position:right top;

CSS文本

  • 文本颜色直接color就行；
  • 文本对齐方式：
text-align:center;（居中对齐
text-align:right;（右对齐
text-align:justify;（两端对齐，会根据当前浏览器窗口大小自适应
  • 文本修饰：text-decoration:overline/line-through...;
  • 文本转换：指定为文本字母大小写
text-transform:uppercase;(大写
text-transform:lowercase;（小写
text-transform:capitalize；（首字母大写
  • 文本缩进:指定文本第一行缩进，ex.text-indent:50px;
    letter-spacing:5px;字符之间的空间
    同理，word-spacing:5px;单词之间的空间
    line-height:200%;行高，大多数浏览器的默认行高约为110%至120%。
    white-space:nowrap;元素内的文字不换行

CSS字体

  • 字体系列
    font-family 属性设置文本的字体系列。
    ps：如果字体系列的名称超过一个字，必须用引号引起来
    font-family 属性应该设置几个字体名称作为一种”后备”机制，如果浏览器不支持第一种字体，他将尝试下一种字体，每种字体之间用逗号隔开。
  • 字体样式
    font-style:normal;（正常
    font-style:italic;（斜体
    font-style:oblique;（倾斜的文字
  • 字体大小
    font-size:50px;或者可以不用像素用em单位，1em的默认大小是16px
    也可以用百分比和em的组合，设置 <body>元素的默认字体大小的是百分比

CSS链接

  • 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后面

CSS列表

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;} 和html差不多

CSS表格

  • 指定CSS表格边框，使用border属性。
table
{
    border-collapse:collapse;/*折叠边框，没有就是双边框*/
}
table,th, td
{
    border: 1px solid black;/*设置黑色边框
}
  • 表格的高和宽用width和height属性
    text-align 文本对齐，vertical-align 垂直对齐
    控制边框和表格内容之间的间距，用td和th元素的填充属性padding
td
{
    padding:15px;
}

设置颜色和之前大差不差

CSS边框

border-style属性用来定义边框的样式 none: 默认无边框

dotted: 定义一个点线边框

dashed: 定义一个虚线边框

solid: 定义实线边框

double: 定义两个边框。 两个边框的宽度和 border-width 的值相同

groove: 定义3D沟槽边框。效果取决于边框的颜色值

ridge: 定义3D脊边框。效果取决于边框的颜色值

inset:定义一个3D的嵌入边框。效果取决于边框的颜色值

outset: 定义一个3D突出边框。 效果取决于边框的颜色值

  • 边框宽度 border-width，颜色border-color，也可以单独设置四面边框

css轮廓

outline属性，具体用法和边框类似

css margin（外边距）

margin属性可以设置1-4个值按顺序为上，右，下，左边距

css padding（填充）

可以看成内边距

display与visibility

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏

  • 隐藏元素：
    display：none；(隐藏但不会占用空间)或者visibility：hidden；(隐藏但是会占用空间)
  • 在内联与块元素之间转换：
li {display:inline;}   //把列表项显示为内联元素
span {display:block;}  //span元素作为块元素

CSS Position（定位）

  • static
    html默认值，静态定位的元素不会受到 top, bottom, left, right影响
  • fixed
    元素的位置相对于浏览器窗口是固定位置
  • relative
    相对定位元素的定位是相对其正常位置，移动相对定位元素，但它原本所占的空间不会改变。
h2.pos_left
{
    position:relative;
    left:-20px; /*从元素的原始左侧位置减去 20 像素，也就是相对于其正常位置向左移动*/
}
h2.pos_right
{
    position:relative;
    left:20px; /*向元素的原始左侧位置增加 20 像素，也就是相对于其正常位置向右移动*/
}

相对定位元素经常被用来作为绝对定位元素的容器块，就是说，相对定位元素包住绝对定位元素，带着他去你想要的位置，实现更精确的布局控制。

  • absolute
    绝对定位使元素的位置与文档流无关，因此不占据空间。
  • sticky
    可以理解为粘性定位，跟着鼠标滚动来定位，滚动到超过目标区域后就会固定在某一特定位置，这个特定位置只能设定为 top, right, bottom 或 left 之一，
  • 重叠元素
    z-index属性指定了一个元素的堆叠顺序，可以为正负值
    overflow属性规定在一个元素溢出指定范围的处理：
  1. scroll 显示滚动条
  2. hidden 隐藏溢出的内容
  3. auto 浏览器自动处理
  4. visible 全展示 但会超出区域（默认

css float（浮动）

float 会使元素向左或向右移动，其周围的元素也会重新排列，浮动元素之后的元素将围绕它。 元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性指定元素两侧不能出现浮动元素。

css布局

  • 元素居中对齐：水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;
  • 文本对齐还是 text-align属性
  • 图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中，放到块元素用display:block;
  • 左右对齐可以用position和float
  • 垂直居中可以用line-height
  • 如果要水平和垂直都居中，可以使用 padding 和 text-align: center:
  • transform
  1. transform:rotate(30deg);旋转
  2. transform:translate(100px,20px)：根据左（X 轴）和顶部（Y 轴）位置给定的参数，从当前元素位置移动
  3. scale 缩放
  4. skew 扭曲
  5. transform-origin 改变元素基点
    清除浮动，用于解决父元素因为子元素浮动而导致高度塌陷的问题，让父元素能够正确包裹浮动的子元素。
 /* 列后面清除浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}

CSS组合选择符

  1. 后代选择器(以空格 分隔)

    用于选取某元素的后代元素
  2. 子元素选择器(以大于 > 号分隔）
    只能选择作为某元素直接/一级子元素的元素
  3. 相邻兄弟选择器（以加号 + 分隔）
    可选择紧接在另一元素后的元素，且二者有相同父元素
  4. 后续兄弟选择器（以波浪号 ～ 分隔）
    选取所有指定元素之后的相邻兄弟元素

CSS伪类

用来添加一些选择器的特殊效果。 anchor伪类 就是修饰链接的 CSS :first-child 伪类：

  • 匹配第一个 <p> 元素
 p:first-child
{
    color:blue;
}
  • 匹配所有<p> 元素中的第一个 <i> 元素
p:first-child i
{
    color:blue;
}
  • 匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素
p:first-child i
{
    color:blue;
}

CSS ：focus伪类 选择元素输入后具有焦点

input:focus
{
	background-color:yellow; //当鼠标选择所修饰的元素后，该元素的背景颜色变为黄色
}

CSS伪元素

语法：

selector::pseudo-element {  /*也支持单冒号*/
    property: value;
}

:first-line 伪元素 :用于向文本的首行设置特殊样式。(只能用于块级元素) 下面的属性可应用于 “first-line” 伪元素：

  • font properties 字体属性 包括：
    font-size（字体大小
    font-weight（字体粗细
    font-style（字体样式 包括：normal“正常”，italic“斜体”，oblique“倾斜”
    font-variant（设置小型大写字母字体，有normal，small-caps
    line-height（行高
    还可以简写为font，例如
body {
    font: italic bold 16px Arial, sans-serif; 
    /* 依次为 font-style, font-weight, font-size, font-family */
}
  • color properties
  • background properties
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear
    “first-letter” 伪元素用于向文本的首字母设置特殊样式
    “:before” 伪元素可以在元素的内容前面插入新内容
    “:after” 伪元素可以在元素的内容之后插入新内容

CSS导航栏

导航条基本上是一个链接列表 我觉得可能常用的几种设计：

  1. 全屏高度的固定导航条
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #ffffff;
    height: 100%; /* 全屏高度 */
    position: fixed; 
    overflow: auto; /* 如果导航栏选项多，允许滚动 */
}
  1. 水平导航栏
    有两种方式，一种是内联：
li
{
    display:inline; 
}

一种是浮动（float）

li
{
    float:left;
}
a
{
    display:block;
    width:60px;
}
  1. 添加分割线
/* 除了最后一个选项(last-child) 其他的都添加分割线 */
li {
    border-right: 1px solid #bbb;
}
 
li:last-child {
    border-right: none;
}
  1. 下拉菜单
    实现鼠标悬浮显示菜单：
 .dropdown-content {
     display: none;  /*先让他看不见*/
     position: absolute;
     /* 默认相对于<html>进行绝对定位 */
     background-color: #f9f9f9;
     min-width: 100px;
     box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
 }
 .dropdown:hover .dropdown-content {
     display: block;
     /* 中间的空格表示，鼠标悬念在.dropdown上时，dropdown的子元素.dropdown-content变为块元素 */
 }

菜鸟上的一个实例

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;
    border-radius: 6px;
    padding: 5px 0;

    /* 定位 */
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>

CSS属性选择器

根据元素的属性或属性值来选择元素 常见的属性选择器：

 [attribute]{ /* 属性 */
/*描述你想要的效果*/
}这种直接匹配有这种属性的元素

属性值匹配选择器：

/* 选择所有 `type` 属性等于 `text` 的元素 */
[type="text"] {
  /*描述你想要的效果*/
} /*如果是=，就是完全匹配；如果是~=，选择属性值中包含指定单词（单词以空格分隔）的元素。（就是说这个指定单词是独立的
如果是 |=，则是选择具有指定值或者以指定值开头并紧跟着连字符 - 的属性值的元素，常用于语言代码。
如果是^=，则是选择属性值以指定值开头的元素
如果是$=,则是选择属性值以指定值结尾的元素
如果是*=，则是选择属性值中包含指定值的元素（只要有指定的这个字眼就行

CSS计数器

  • counter-reset – 创建或者重置计数器
  • counter-increment – 递增变量
  • content – 插入生成的内容
  • counter() 或 counters() 函数 – 将计数器的值添加到元素
    要使用 CSS 计数器，得先用 counter-reset 创建


  2. 先创建和初始化计数器，比如：

    3.  
/* 创建并初始化一个名为 "sectionCounter" 的计数器，初始值为 0 */
body {
    counter-reset: sectionCounter; 
}

/* 创建并初始化多个计数器 */
body {
    counter-reset: sectionCounter 0 chapterCounter 1; 
}
  1. 增加计数器的值，默认每次加1，也可以自定义
h2 {
    counter-increment: sectionCounter; 
}

/* 每次遇到 h3 元素，将 chapterCounter 计数器增加 2 */
h3 {
    counter-increment: chapterCounter 2; 
}
  1. 显示计数器的值 使用counter()函数在元素的内容中显示计数器的值，counter() 函数接受计数器的名称作为参数，还可以指定显示格式（如十进制、罗马数字等）。
h2:before { 
    content: "Section " counter(sectionCounter) ": "; 
}  /*在每个h2元素的内容前面添加文本，并显示sectionCounter计数*/

h3:before {
    content: "Chapter " counter(chapterCounter, upper-roman) ": "; 
}

计数器还可以嵌套

CSS !important 规则

CSS 中的 !important 规则用于增加样式的权重。 !important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。 不要轻易使用!importsnt规则

CSS 实例(from 菜鸟）

CSS

评论

  1. lllllll
    3 月前
    2025-8-06 19:37:44

    大佬求带飞【动画表情】

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																

							
							
						

															
					
											
						

	

		
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
（╯‵□′）╯︵┴─┴
￣﹃￣
(/ω＼)
∠( ᐛ 」∠)＿
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ｀)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ(￣∇￣o)
ヾ(´･ ･｀｡)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò｡)
Σ(っ °Д °;)っ
( ,,´･ω･)ﾉ"(´っω･｀｡)
╮(╯▽╰)╭
o(*////▽////*)q
＞﹏＜
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
	

	

		
颜文字
Emoji
小恐龙
花!
	


									

			

			
			
		

	






上一篇
下一篇