学习笔记（CSS）

最新推荐文章于 2024-09-24 15:55:35 发布
最新推荐文章于 2024-09-24 15:55:35 发布
阅读量139 收藏
点赞数
文章标签： css html 定位 列表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47105662/article/details/116009938
版权
本文详细介绍了CSS的基础知识，包括选择器、注释、颜色定义、显示模式（如block和inline）、伪类如锚点伪类，以及定位（如absolute、relative和fixed）、浮动元素和清除浮动。此外，还讲解了背景、文本样式、列表和表格的样式设置，以及盒子模型。最后，提到了响应式设计和CSS在网页布局中的应用。
摘要由CSDN通过智能技术生成

目录

基本知识

CSS参考手册：CSS参考手册
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
CSS注释以 /* 开始, 以 */ 结束：

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

CSS中，颜色值通常以以下方式定义:

  • 十六进制- 如："#ff0000"
  • RGB - 如：“rgb(255,0,0)”
  • 颜色名称 - 如：“red”

显示display

块和内联元素

  1. 块级元素(block)特性：总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
  2. 内联元素(inline)特性：和相邻的内联元素在同一行;宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;
  3. 块级主要元素: address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
  4. 内联元素主要有：a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup , textarea , tt , u , var
  5. 可变元素/变更元素的显示类型看该元素是如何显示，它是什么样的元素：applet , button , del , iframe , ins , map , object , script

display属性： 下拉菜单必须设置（display：none）
在这里插入图片描述

伪类

CSS伪类是用来添加一些选择器的特殊效果。伪类的名称不区分大小写。
CSS伪类参考手册：CSS选择器

anchor伪类实现链接的变化：

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

定位position

  1. absolute(绝对定位)，其位置相对于最近已定位的父元素，如果元素没有已定位的父元素那么它的位置相对于
  2. static(默认的静态定位)，即没有定位，遵循正常的文档流对象，静态定位的元素不受top、left、right、bottom影响。
  3. relative(相对定位)，其位置相对其正常时的位置。相对定位元素经常被用来作为绝对定位元素的容器块。
  4. fixed，元素的位置相对于浏览器窗口，是固定位置。即使窗口是滚动的它也不会移动。
  5. sticky(粘性定位)，基于用户滚动位置来定位，在未滚动出目标区域时，它的行为就像position:relative;它的表现就像position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

全屏固定高度的导航栏：

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    height: 100%; /* 全屏高度 */
    position: fixed; 
    overflow: auto; /* 如果导航栏选项多，允许滚动 */
}

浮动float

.onetest
{
    float:left;
    width:110px;
    height:90px;
    margin:5px;
}

如果有空间的话，浮动的元素将彼此相邻。

.twotest
{
    clear:both;
}

clear清除浮动，元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性清除浮动。both也清除了onetest的浮动属性。
用浮动写的实例（内含导航栏、伪类、盒模型等应用）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
* {
	box-sizing: border-box;/*改成context-box试试*/
	}
body {
	margin: 0;
	}
.header {    
	background-color: #2196F3;    
	color: white;    
	text-align: center;    
	padding: 15px;
	}
.footer {    
	background-color: rgb(78, 76, 76);    
	color: white;    
	padding: 15px;
	}
.topmenu {    
	list-style-type: none;    
	margin: 0;    
	padding: 0;    
	overflow: hidden;    
	background-color: #777;
	}
.topmenu li {    
	float: left;
	}
.topmenu li a {    
	display: inline-block;    
	color: white;    
	text-align: center;    
	padding: 16px;    
	text-decoration: underline;
	}
.topmenu li a:hover {/*:hover选择器 选择鼠标指针浮动在其上的元素，并设置其样式：*/
	background-color: #222;
	}
.topmenu li a.active {/*active类标准哪个选项被选中*/    
	color: white;    
	background-color: #4CAF50;
	}
.column {    
	float: left;    
	padding: 15px;
	}
.clearfix::after {    
	content: "";    
	clear: both;    
	display: table;
	}
.sidemenu {    
	width: 25%;
	}
.content {    
	width: 75%;
	}
.sidemenu ul {    
	list-style-type: none;    
	margin: 0;    
	padding: 0;}
.sidemenu li a {    
	margin-bottom: 4px;    
	display: block;    
	padding: 8px;    
	background-color: #eee;    
	text-decoration: none;    
	color: #666;
	}
.sidemenu li a:hover {    
	background-color: #555;    
	color: white;
	}
.sidemenu li a.active {    
	background-color: #008CBA;    
	color: white;
	}
</style>
</head>
<body>
<ul class="topmenu">  
	<li><a href="#home" class="active">主页</a></li>  
	<li><a href="#news">新闻</a></li>  
	<li><a href="#contact">联系我们</a></li>  
	<li><a href="#about">关于我们</a></li></ul>
<div class="clearfix">  
	<div class="column sidemenu">    
		<ul>      
			<li><a href="#flight">The Flight</a></li>      
			<li><a href="#city" class="active">The City</a></li>
			<li><a href="#island">The Island</a></li>      
			<li><a href="#food">The Food</a></li>      
			<li><a href="#people">The People</a></li>      
			<li><a href="#history">The History</a></li>      
			<li><a href="#oceans">The Oceans</a></li>    
		</ul>  
	</div>
	<div class="column content">    
		<div class="header">      
			<h1>The City</h1>    
		</div>    
		<h1>Chania</h1>    
		<p>这是一段文字1</p>    
		<p>这是一段文字2</p>  
	</div>
</div>
<div class="footer">  
	<p>底部文本</p>
</div>
</body>
</html>

在这里插入图片描述

常见标签

背景

background复合属性。设置对象的背景特性。
background-attachment设置或检索背景图像是随对象内容滚动还是固定的。必须先指定background-image属性。scroll:背景图片随着页面的滚动而滚动，这是默认的； fixed:背景图片不会随着页面的滚动而滚动。
background-color设置或检索对象的背景颜色。
background-image设置或检索对象的背景图像。url(‘URL’)：图像的URL
background-position设置或检索对象的背景图像位置。必须先指定background-image属性。x% y%；xpos ypos
background-repeat设置或检索对象的背景图像如何铺排填充。必须先指定background-image属性。repeat:背景图像将向垂直和水平方向重复。这是默认;repeat-x:只有水平位置会重复背景图像;no-repeat: background-image不会重复
background-size检索或设置对象的背景图像的尺寸大小。

修改页面背景实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景页面</title> 
<style>
body {    
	color: aliceblue;    
	background-image:url('1.jpg');    
	background-color:#cccccc;    
	background-size: cover;
	}
</style>
</head>

<body>
<h1>Hello World!</h1>
</body>

</html>

在这里插入图片描述

文本文字

一个网页的背景颜色是指在主体内的选择。对于W3C标准的CSS：如果定义了颜色属性，还必须定义背景色属性。CSS字体属性定义字体，加粗，大小，文字样式。

属性描述
color设置文本颜色
direction设置文本方向。ltr：默认。文本方向从左到右；rtl：文本方向从右到左。
letter-spacing增加或减少字符间的空白（字符间距）normal：默认。规定字符间没有额外的空间。length：定义字符间的固定空间（允许使用负值）。
text-align对齐元素中的文本
text-decoration向文本中添加修饰underline；overline；line-through；blink在这里插入图片描述
font在一个声明中设置所有的字体属性，可设置的属性是（按顺序）： "font-style font-variant font-weight font-size/line-height font-family"font-size和font-family的值是必需的。

列表表格

在 HTML中，有两种类型的列表：

  • 无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）
  • 有序列表 ol - 列表项的标记有数字或字母

用 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;}

在这里插入图片描述
在这里插入图片描述
表格实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#customers{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    	width:100%;
    	border-collapse:collapse;
    	}
#customers td, #customers th {
	font-size:1em;    
	border:1px solid #9dda65;    
	padding:3px 7px 2px 7px;
	}
#customers th {
	font-size:1.1em;    
	text-align:left;    
	padding-top:5px;    
	padding-bottom:4px;    
	background-color:#a6d150;    
	color:#ffffff;
	}
#customers tr.alt td {
	color:#000000;    
	background-color:#EAF2D3;
	}
</style>
</head>
<body>
<table id="customers"><tr><th>Company</th><th>Contact</th><th>Country</th></tr><tr><td>1</td><td>2</td><td>3</td></tr><tr class="alt"><td>4</td><td>5</td><td>6</td></tr><tr><td>7</td><td>8</td><td>9</td></tr><tr class="alt"><td>10</td><td>11</td><td>12</td></tr><tr><td>13</td><td>14</td><td>15</td></tr><tr class="alt"><td>16</td><td>17</td><td>18</td></tr><tr><td>19</td><td>20</td><td>21</td></tr><tr class="alt"><td>22</td><td>23</td><td>24</td></tr><tr><td>25</td><td>26</td><td>27</td></tr><tr class="alt"><td>28</td><td>29</td><td>30</td></tr>
</table>
</body>
</html>

在这里插入图片描述

盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。在这里插入图片描述在这里插入图片描述
border（边框）

属性描述
border-style用于设置元素所有边框的样式，或者单独地为各边设置边框样式在这里插入图片描述
border-width用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-bottom-style设置元素的下边框的样式。
border-bottom-color设置元素的下边框的颜色。
border-bottom-width设置元素的下边框的宽度。

border-style 属性可以有1-4个值：

  • border-style：属性1，属性2，属性3，属性4
  • 上->右->下->左
  • border-style：属性1，属性2，属性3
  • 上->左右->下
  • border-style：属性1，属性2
  • 上下->左右
  • border-style：属性1
  • 上下左右属性相同

margin（outline）、padding用法与border相似，不再赘述。

持续更新ing

  • 响应式网站
  • CSS与HTML结合
  • 关于图片、音频网站
  • CSS3扩展
雪茔
关注
CSS学习笔记CSS学习笔记
04-03
CSS学习笔记CSS学习笔记CSS学习笔记CSS学习笔记
HTML+CSS学习笔记.zip
01-01
HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...
前端开发-CSS快速掌握上手知识详细总结
weixin_45168167的博客
11-22 5353
01_CSS基础 前言 最准确的网页设计思路是把网页分成三个层次，即：结构层、表示层、行为层。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wsmkKve6-1637594225448)(images01_base/wps1.jpg)] HTML:结构层,Hyper Text Markup Language,超文本标记语言 CSS:表现层,Cascading Style Sheets，层叠样式表 JS:行为层,JavaScript，客户端脚本语言 **网页的结构层（stru
Web前端学习———CSS知识点
weixin_42029090的博客
06-15 738
CSS 指层叠样式表 (Cascading Style Sheets)CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。CSS声明总是以分号(;)结束，声明组以大括号({})括起来:id 选...
@Column 属性说明
qq_27173485的博客
12-20 2513
在使用此@Column标记时，需要注意以下几个问题： l         此标记可以标注在getter方法或属性前，例如以下的两种标注方法都是正确的： 标注在属性前： @Entity @Table(name = "contact") public class ContactEO{ @Column(name=" contact_name ") private
尚硅谷CSS学习笔记
MissXu666的博客
10-10 1390
等等），导致节点位置发生变化，此时触发浏览器重排（reflow），需要重新生成渲染树。③维护方面：CSS Sprites在维护的时候比较麻烦，页面背景有少许改动时，就要改这张合并的图片，无需改的地方尽量不要动，这样避免改动更多的CSS，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动CSS。我们在编码时，不用过于关注浏览器的私有前缀，不用去记忆，去查询，因为常用的css3 新特性，主流浏览器都是支持的，对于老版本浏览器，我们也可以借助现代构建工具，去帮我们添加私有前缀。
CSS入门学习笔记+案例
热门推荐
itboy
06-16 30万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
CSS学习笔记
m0_58761900的博客
09-18 3109
5.1 边框:border 5.2 内边距：padding 5.3 外边距:margin 5.4 块级元素的水平居中 7.1 弹性布局：flex 7.2 水平方向的排列方式：justify-content 7.3 垂直方向的排列方式：align-items
CSS 学习笔记
weixin_42098295的博客
05-06 1275
定位（Positioning）：static, relative, absolute, fixed, sticky。组成：内容(content)、内边距(padding)、边框(border)、外边距(margin)。媒体查询（Media Queries）：根据不同的屏幕尺寸或设备特性应用不同的样式。属性选择器：根据元素属性选择，如 [type="text"]。Grid：二维布局模型，提供网格系统，进行更复杂的布局设计。伪元素选择器：如 ::before, ::after。
前端css基础学习笔记
a_big_panda的博客
01-22 1000
例如： 效果：例如：效果：例如：效果：选择页面中对应的标签（找她），方便后续设置样式（改她）例如：效果：例如：效果：注意：一个id选中多个标签也有效果，但不符合规范，规范是一个id选择器只选中一个标签例如：效果：例如：效果：例如：效果：注意点：例如：效果：例如：效果：注意：注意：例如：效果：例如：效果：注意：例如：效果：例如：效果：注意：如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置例如：效果：注意：开发中会使用text-decoration：none；清除a标签默认的下
前端学习笔记css3
m0_65379170的博客
03-27 942
css学习笔记1
qq_42236791的博客
12-12 976
HTML（结构）、CSS（表现）、行为（JavaScript）CSS的全称：层叠样式表（Cascading Style Sheets）。CSS也是一种标记语言，用于给HTML结构设置样式，例如：文字大小、颜色、元素宽高等。简单理解：CSS可以美化HTML，让HTML更漂亮。核心思想：HTML搭建结构，CSS添加样式，实现了：结构与样式的分离。
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar
04-18
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar ...
css经典学习笔记.zip
11-01
《CSS经典学习笔记》 CSS（Cascading Style Sheets）是网页设计中不可或缺的一部分，它负责定义网页内容的样式和布局。本学习笔记将深入探讨CSS的核心概念、选择器、盒模型、布局方式以及响应式设计等多个方面，...
前端的学习笔记HTML+css.zip
01-05
前端的学习笔记HTML+css前端的学习笔记HTML+css前端的学习笔记HTML+css 前端的学习笔记HTML+css前端的学习笔记HTML+css前端的学习笔记HTML+css 前端的学习笔记HTML+css前端的学习笔记HTML+css前端的学习笔记HTML+css...
【CSS】变量的声明与使用
千里之行，始于足下
09-18 572
css中声明变量，以及变量的使用；root伪类选中根元素，在其中定义变量
Vue中集中常见的布局方式
张雨的博客
09-24 396
【代码】Vue中集中常见的布局方式。
CSS05-复合选择器
最新发布
qq_31532983的博客
09-24 214
后代选择器、子类选择器、并集选择器、伪类选择器（链接伪类、focus伪类）
CSS04-Chrome调试工具
qq_31532983的博客
09-24 240
Chrome调试工具
HTML与CSS基础学习笔记
“html和css笔记，包括HTML基础、XHTML注意事项、常用标签等内容，结合了书籍、网站和知名专家的资源，以及各种网页调试工具的介绍。” HTML与CSS是构建网页设计的基础，它们分别负责网页的结构和样式。HTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值