web前端学习笔记-day08 css概念基础认识

最新推荐文章于 2024-07-17 14:19:40 发布

秃头女孩永不认输

最新推荐文章于 2024-07-17 14:19:40 发布

阅读量366

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/starbiu/article/details/122082409

版权

html

html实体转义符+html块级标签和行级标签

W3C规范+html语义化标签+文件命名规范

html表单表格

css
css的概念（css，css的流，css3，css专业用语，css中的未定义行为）

流，元素，基本尺寸

盒尺寸四大家族

内联元素与流

流的破坏和保护

css层叠规则

css强大的文本处理能能力

元素的装饰与美化

元素的显示与隐藏

用户界面样式

流向的改变

1.认识css

W3C推出了css，把结构和样式分离，html只负责结构，样式交给css来实现

1.1基本语法

css语法有三个部分组成：选择器,属性，属性值

selector{property：value}

（1）属性：

height color width padding margin

（2）值：

颜色值：#0000
长度值：100px
百分比值：padding(内边距)：50%，属于<percent>
整数值：，z-index：1属于<number>
数值：line-height：1.5 ，属于<number>

（3）关键字

例如 solid（定义实线边框），inherit（指定一个属性应从父元素继承它的值）

其中inherit也被称为泛关键字（所有css属性都可以使用的关键字）

（4）长度单位

长度单位可以划分为

相对长度

相对字体长度：em，ex css3中的rem和ch
相对视区长度：

绝对长度：px，pt，cm，mm，pc

（5）属性值：

1px， solid rgb(0.0,0）

（6）声明

属性名+属性值就是声明

width：100px

（7）声明块

{

width：100px；

height：100px；

}

（8）选择器

简单选择器（根据名称、id、类来选取元素,通过 id： #box）
组合器选择器（根据它们之间的特定关系来选取元素）
伪类选择器（根据特定状态选取元素,:first-child）
伪元素选择器（选取元素的一部分并设置其样式，::first-line:）
属性选择器（根据属性或属性值来选取元素,[title = "css-word"]{}）

（9）规则，规则集

选择器+声明块

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

（10）变量

CSS 变量可以访问 DOM，这意味着可以创建具有局部或全局范围的变量，使用 JavaScript 来修改变量，以及基于媒体查询来修改变量。

使用 CSS 变量的一种好方法涉及设计的颜色。可以将它们放在变量中，而不必一遍又一遍地复制和粘贴相同的颜色。

（11）@规则

以@字符开始的一些规则例如

@support，@media，@page

1.2未定义行为

未定义行为是指执行某种计算机代码所产生的结果，这种代码在当前程序状态下的行为在其所使用的语言标准中没有规定。常见于翻译器对源代码存在某些假设，而执行时这些假设不成立的情况。

比如 a：active {background-color:red;}

button.addEventListener("mousedown",function(event){

......

event.prevenDefault()；//在鼠标按下后，阻止鼠标默认行为，可以使得拖动效果更流畅

}

这是当鼠标点击按钮时按钮会变成红色

但是在火狐浏览器中她并不会变红，但是IE和Chrome正常。因为Firefox认为，active发生在mousedown事件后。

2.css3

”（1）布局更加丰富

弹性盒子布局（flexible box layout）
格栅布局（grid layout）
催生了css3媒介以及许多响应式布局特性的出现如图片元素的srcset属性（用于浏览器根据宽、高和像素密度来加载相应的图片资源），css的object-fit属性（用来指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框

（2）视觉表现进步

圆角，阴影，渐变
transform向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜
filter滤镜和混合模式让web轻松变成在线Photoshop
animantion使动画变得更简单

3.css的引用方式

1）行嵌样式

<p style="color: red; magrgin-letf:20px">这是p标签</p>

2)内部样式表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		p{
			background-color: blue;
			font-size: 18px;
			font-style: italic;
		}
		</style>
	</head>
	<body>
		<p >段落1</p>
	</body>
</html>

3）外联样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 外部css，外联样式 -->
		<link rel="stylesheet" href="mystyle.css">
		<!-- 内部css，内联样式 -->
		<style>
		p{
			background-color: blue;
			font-size: 18px;
			font-style: italic;
		}
		</style>
	</head>
	<body>
	<!-- 	当被指定了多个样式时，优先级从上到下为
		1.行内样式（在 HTML 元素中）
		2.外部和内部样式表（在 head 部分）
		3.浏览器默认样式 -->
		<h1>我是外部css</h1>
		<p >我是内部css段落1</p>
		<h2 style="color: #0000FF;text-align: center;border: 2px solid #7FFFD4;">我是行内css</h2>
		<h2 style="background-color: tomato;">lalalal</h2>
	</body>
</html>

秃头女孩永不认输

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端学习笔记-day08 css概念基础认识

web前端学习笔记总页面网页基础布局htmlhtml基础结构html基础标签htm标签属性html文本格式化标签html实体转义符+html块级标签和行级标签W3C规范+html语义化标签+文件命名规范1.认识cssW3C推出了css，把结构和样式分离，html只负责结构，样式交给css来实现1.基本语法css语法有三个部分组成：选择器,属性，属性值selector{property：value}2.css的引用方式1）行嵌样式<p s
复制链接

扫一扫