css基础查询笔记

最新推荐文章于 2024-09-22 13:58:30 发布
最新推荐文章于 2024-09-22 13:58:30 发布
阅读量174 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43486230/article/details/108428645
版权

css学习笔记

一、选择器

1.1 标记选择器

直接使用HTML标记名称作为选择器

p 
	{
		color:red;
	}

1.2 类选择器

用于选择html中class属性对应标记的元素
格式： .类名{}

<p class="red">我要红了</p>
<style type="text/css">
	.red {color:red;}
</style>

1.3 id选择器

用于选择html中id对应标记的元素
格式： #id名{}

<p id="red">我要红了</p>
<style type="text/css">
	#red {color:red;}
</style>

1.4 伪类选择器

添加一些选择器的特殊效果
格式： :伪类名{}

伪类名说明
link设置a标记在未被访问前的样式
hover设置a标记在鼠标悬停时的样式
active设置a标记在被鼠标点击与释放之间时 的样式
visited设置啊标记在被访问后的样式
<style type="text/css">
	a:hover{color:red;}
</style>

1.5 属性选择器

格式： [attribute]

符号说明
~=包含指定词汇的标记
|=带有带有指定值开头的属性的标记（value/“value-”开头的值）
^=匹配属性值以指定值开头的标记
$=匹配以指定值结尾的标记
*=匹配属性值中包含指定值的标记
{name^="aaa"}{color:red}	/*属性值以aaa开头的*/

二、 定义与引用

方式语法说明
内联样式表<标记 style=“属性1：值1”>内容</标记>
内部样式表<style type=“text/css”> …</style>
外部样式表<link type=“text/css” rel=“stylesheet” ref=“flyA.css”>

三、div与span

3.1 div基础

div的属性可有id、class、style
style属性如下

style属性值值说明
positionstatic静态定位，默认设置
absloute绝对定位，与位置属性配合使用
relative表示相对定位，图层不可叠
fixed表示图层位置固定不滚动
border粗细 线形 线颜色边框的属性
background-colorrgb()背景颜色
left/top/width/heightpixes/%规定图层的各边距离、宽度高度
floatleft|right|none左、右、不浮动
clearleft|right|both|none清除浮动、允许两边浮动
z-indexauto|数字按照父层|数字
overflowscroll|visible|auto|hidden内容溢出控制。始终显示滚动条、不显示滚动条，但超出部分可见、内容超出时显示滚动条、超出时显示隐藏内容
displayblock|inline|none|按块元素显示、行内方式显示和隐藏等

3.2 span基础

块元素：

  • 支持全部的样式
  • 如果没有设置宽度，默认的宽度为父级宽度100%
  • 盒子占据一行、即使设置了宽度

内联元素：

  • 支持部分样式（不支持宽、高、margin上下、padding上下）
  • 宽高由内容决定 盒子并在一行
  • 代码换行，盒子之间会产生间距
  • 子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式

内联块元素：

  • 支持全部样式
  • 如果没有设置宽高，宽高由内容决定
  • 盒子并在一行
  • 代码换行，盒子会产生间距
  • 子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式。

div标记是区块元素，包含的元素会自动换行
span标签是行内元素，不会自动换行
display属性相互转化：

属性值说明
none不显示此元素
inline设置为行内元素
block设置为块级元素
inline-block设置为行内快标记
inherit从父元素继承display的属性值

四、css样式属性

4.1 css字体样式

font的属性

属性值说明
font-size绝对大小|相对大小|关键字设置字体大小
fonr-stylenormal|italic|oblique默认值 |斜体显示文字|倾斜字体显示
font-famlily字体设置字体
font-variantnormal|small-caps正常字体(默认值)
font-weightnormal|bold|bolder|lighter|整数默认值|标准粗体|特粗体|细体|粗细程度

4.2 css文本样式

属性值说明
letter-spacingnormal|长度单位字符间距默认间距|长度
line-heightnormal|长度行间距默认间距|长度
text-index长度单位|百分比单位首行缩进
text-transformcapitalize|uppercase|lowercase|none第一个字母转成大写|转成大写|转成小写|不转换
text-tdecorationnone|underline|line-through文字无装饰|加下划线|加删除线|加上划线
text-alignleft|right|center|justify左对齐|右对齐|居中|两端对齐
vertical-aligntop|middle|bottom|text-top|text-bottom垂直对齐属性：1.元素顶端对齐行中最高元素顶端2.放置在父元素的中部3.顶端与行中最低元素顶端4.顶端与父元素顶端5.底端与父元素底端

4.3 css列表样式

属性值说明
disc实心圆
circle空心圆
square实心方块
decimal阿拉伯数字
lower-roman小写阿拉伯数字
upper-roman大写阿拉伯数字
lower-alpha小写英文字母
upper-alpha大写英文字母
none不使用项目符号

4.4 css盒模型

盒模型有margin、border、padding、content。设置值顺序：上右下左

属性值说明
margin(4)长度|百分比|auto外边距(盒子间的距离)
border-stylenone|hidden|dotted|dashed|solid|double无边框|无边框|点状边框|虚线|实线|双线
border-widthmedium|thin|thick|length边框默认宽度|小于默认|大于默认|长度
border-color颜色边框颜色
padding(4)长度|百分比内边距(元素内容与边框距离)

4.5 表格

1、<table>标签：声明一个表格，它的常用属性如下：

border属性 定义表格的边框，设置值是数值
cellpadding属性 定义单元格内容与边框的距离，设置值是数值
cellspacing属性 定义单元格与单元格之间的距离，设置值是数值
align属性 设置整体表格相对于浏览器窗口的水平对齐方式,设置值有：left | center | right
2、<tr>标签：定义表格中的一行

3、<td>和<th>标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格，它们的常用属性如下：

align 设置单元格中内容的水平对齐方式,设置值有：left | center | right
valign 设置单元格中内容的垂直对齐方式 top | middle | bottom
colspan 设置单元格水平合并，设置值是数值
rowspan 设置单元格垂直合并，设置值是数值

4.6 表单

1、<form>标签 定义整体的表单区域

action属性 定义表单数据提交地址
method属性 定义表单提交的方式，一般有“get”方式和“post”方式
2、<label>标签 为表单元素定义文字标注

3、<input>标签 定义通用的表单元素

type属性
type=“text” 定义单行文本输入框
type=“password” 定义密码输入框
type=“radio” 定义单选框
type=“checkbox” 定义复选框
type=“file” 定义上传文件
type=“submit” 定义提交按钮
type=“reset” 定义重置按钮
type=“button” 定义一个普通按钮
type=“image” 定义图片作为提交按钮，用src属性定义图片地址
type=“hidden” 定义一个隐藏的表单域，用来存储值
value属性 定义表单元素的值
name属性 定义表单元素的名称，此名称是提交数据时的键名
4、<textarea>标签 定义多行文本输入框

5、<select>标签 定义下拉表单元素

6、<option>标签 与<select>标签配合，定义下拉表单元素中的选项

五、练习

5.1 表格练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		水平居中  center
		垂直居中  middle
		
		<!--table表示声明一个表格
		tr标签用来声明一行
		td标签用来声明一个单元格
		表格是横平竖直的，每一行单元格的数量都应该是一样的
		每一行单元格的高度都一样
		每一列单元格的宽度都一样
		-->
		<table border="1" width="500" height="400" cellspacing="" cellpadding="" align="center">
		<!--
		table中的宽、高为整个表格总宽、高分配
		table中的align属性用来控制单元格在父级元素的位置
		tr中的align 调整左右、valign调整上下
		-->
			<tr>
				<th>课程表</th>
			</tr>
			
			<!--第一列-->
			<tr height="200" bgcolor="greenyellow" valign="top" align="right">
		    <!--单独行的高度-->
				<td></td>
				<td>周一</td>
				<td>周二</td>
				<td>周三</td>
				<td>周四</td>
				<td>周五</td>
			</tr>
			
			<tr>
				<td>第一节课</td>
				<td>语文</td>
				<td>数学</td>
合并
保留要合并的单元格的第一个，删除其他的
给保留下来的单元格横向或纵向占用的单元格的数量（合并左右关系的单元格，用colspan、合并上下关系，用rowspan）
				<td colspan="3">英语</td>
			</tr>
			<tr>
				<td>第二节课</td>
				<td>语文</td>
				<td>数学</td>
				<td>英语</td>
				<td>物理</td>
				<td>化学</td>
			</tr>
			<tr>
				<td>第三节课</td>
				<td>语文</td>
				<td>数学</td>
				<td>英语</td>
				<td>物理</td>
				<td>化学</td>
			</tr>
			
			<!--  tr*4>td*6   快捷写四行六列   -->
		</table>
		
	</body>
</html>

输出结果：
在这里插入图片描述

5.2 表单练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		disabled禁用表单，不可对输入框进行更改
		maxlength最大输入长度
		checked="checked"单选框默认值选中
		selected="selected"下拉列表默认选中
		size="2"下拉列表默认显示几个值
		<form>
			
		<h1>报名表</h1>
		姓名<input type="text" disabled="" maxlength=""/>
		<br />
		密码<input type="password" />
		<br />
		
		<!--name相同即可成为单选、表单上传的是value值-->
		性别：男<input type="radio" name="sex" checked="checked"/>女<input type="radio" name="sex"/>
		<br />
		
		<!--name相同且值的后面加[]、表单上传的是value值-->
		家庭条件：
		存款百万<input type="checkbox" name="family[]"/>
	          良田百亩<input type="checkbox" />
	          家有豪宅<input type="checkbox" />
	    <br />
	    
	    
	         学历：<select size="4">
	         	<option>幼儿园</option>
	         	<option selected="selected">小学</option>
	         	<option>初中</option>
	         	<option>高中</option>
	         	<option>大学</option>
	         	<option>凹凸曼</option>
	         </select>
	    <br />
	         照片：<input type="file" />
	    <br />
	   </form> 
	</body>
</html>

运行结果：
在这里插入图片描述

青岛City
关注
专栏目录
学习CSS基础过程笔记
03-26
学习 CSS 基础过程笔记是前端开发者的必备技能之一，本笔记总结了 CSS 的基础知识点，涵盖选择器、常见样式、布局案例等多方面的内容。 选择器 选择器是 CSS 中最基本也是最重要的概念之一。选择器用于选择 HTML ...
css基础学习笔记之字体图标
01-08
一、字体图标的运用克服了精灵图的缺点： 1.图片文件还是比较大的 2.像素图片放大或缩小会失真 3.一旦完整精灵图片制作完成后想要更换非常复杂 二、字体图标–iconfont：展示的是图片，本质是属于字体，字体图标有三...
css基础知识笔记
2301_79175212的博客
09-22 1389
vscode,启动!
前端css基础学习笔记
a_big_panda的博客
01-22 1057
例如： 效果：例如：效果：例如：效果：选择页面中对应的标签（找她），方便后续设置样式（改她）例如：效果：例如：效果：注意：一个id选中多个标签也有效果，但不符合规范，规范是一个id选择器只选中一个标签例如：效果：例如：效果：例如：效果：注意点：例如：效果：例如：效果：注意：注意：例如：效果：例如：效果：注意：例如：效果：例如：效果：注意：如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置例如：效果：注意：开发中会使用text-decoration：none；清除a标签默认的下
CSS入门学习笔记+案例
热门推荐
itboy
06-16 31万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
尚硅谷CSS学习笔记
MissXu666的博客
10-10 1461
等等），导致节点位置发生变化，此时触发浏览器重排（reflow），需要重新生成渲染树。③维护方面：CSS Sprites在维护的时候比较麻烦，页面背景有少许改动时，就要改这张合并的图片，无需改的地方尽量不要动，这样避免改动更多的CSS，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动CSS。我们在编码时，不用过于关注浏览器的私有前缀，不用去记忆，去查询，因为常用的css3 新特性，主流浏览器都是支持的，对于老版本浏览器，我们也可以借助现代构建工具，去帮我们添加私有前缀。
CSS基础使用笔记
2301_80463357的博客
06-13 1804
从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。
CSS基础笔记-02动画
渔道的博客
01-05 1305
学习css动画的基本用法
CSS基础入门（详细总结笔记）
程序员阿龙的博客
08-12 4232
CSS基础入门，详细总结
CSS基础知识汇总
ximu__l的博客
06-07 1260
本文是关于CSS技术的基础内容，详细展列了CSS技术相关的基础。
CSS基础笔记
Junnix的博客
12-19 3663
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 1.所有的css代码都写在style标签里--> <!-- 像这种把div标签的属性直接设置在style标签内部属于内部样式--> <!-- 它可以把所有的div标签都设置成内部样式的格式-->
CSS基础笔记-01CSS概述
渔道的博客
01-05 1222
CSS是什么？有什么作用？怎么编写CSS？怎样添加CSS？本文对CSS的四个方面作了学习并形成学习笔记。
CSS基础_css_笔记
09-23
**CSS基础：开启网页设计之旅** CSS，全称Cascading Style Sheets，是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。它是网页设计的重要组成部分，允许我们将表现与内容分离，使网页...
CSS样式学习笔记之一：基础知识
05-24
在CSS（层叠样式表）的学习中，基础知识是构建网页美观和功能性的基石。这篇学习笔记将引导我们深入了解CSS的...通过阅读这篇"CSS样式学习笔记之一：基础知识"，以及参考提供的博客链接，相信你会对CSS有更深入的理解。
Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip
05-09
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
绑定halcon显示控件，可实现ROI交互，用于机器视觉领域.zip
11-13
绑定halcon显示控件，可实现ROI交互，用于机器视觉领域.zip
PPSSPP-macOS.dmg
11-13
PPSSPP_macOS.dmg 软件备份 psp模拟器Mac版 大佬制作的模拟器相当稳，详细查看官网ppsspp
session身份认证Demo
最新发布
11-13
session身份认证Demo
纯c版本的协程实现汇编切换调度器实现包含服务器端案例客户端并发测试案例.zip
11-13
c语言
HTML与CSS基础学习笔记
“html和css笔记，包括HTML基础、XHTML注意事项、常用标签等内容，结合了书籍、网站和知名专家的资源，以及各种网页调试工具的介绍。” HTML与CSS是构建网页设计的基础，它们分别负责网页的结构和样式。HTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值