WEB前端笔记2——CSS

最新推荐文章于 2021-04-18 12:39:09 发布

岩流

最新推荐文章于 2021-04-18 12:39:09 发布

阅读量105

点赞数

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/weixin_43470419/article/details/88775947

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一话题引入

1 使用表格布局的缺陷

嵌套层级太多,一旦出现嵌套顺序错乱，整个页面达不到预期的效果
采用表格布局，页面不够灵活

2 解决方法

使用HTML的块标签(配合css一起使用才有用处)：

div标签
- 自动换行，默认占一行
span标签
- 内容显示在同一行

二 CSS 概述

Cascading Style Sheets：层叠样式表
美化HTML页面，HTML是网页的骨架，CSS来装修。将页面美化和代码进行分离，提高代码复用性。

1.基本语法

<head>
	<style>
	 选择器{
		属性名称:属性的值;
		属性名称2:属性的值;
	 }
	</style>
</head>

CSS选择器：帮助我们找到要修饰的标签或元素

2.常用的选择器

（1）元素选择

    元素名称{
    	属性名称1:值;
    	...
    }

（2）ID选择器

以#开头,id在整个页面中必须是唯一的.在需要改的div标签添加id
同一id只能使用一次

#ID的名称{
	属性名称1:值;
	...
}

（3）类选择器

以.开头,在需要的div标签添加class
给同一类的元素加上了相同的样式

.类的名称{
	属性名称1:值;
	...
}

(4) 其他选择器

CSS中的其它选择器

选择器分组: 选择器1,选择器2{ 属性的名称:属性的值}
属性选择器

a[title]
a[titile='aaa']
a[href][title]
a[href][title='aaa']

后代选择器: 爷爷选择器孙子选择器找出所有的后代
子元素选择器: 父选择器 > 儿子选择器
伪类选择器: 通常都是用在A标签上

3. CSS引入方式

外部样式
- 通过link标签引入一个外部的css文件
- e.g. <link rel="stylesheet" href="文件路径" />
内部样式
- 直接在style标签内编写CSS代码
行内样式
- 直接在标签中添加一个style属性, 编写CSS样式
- e.g. <div style="color:yellow">

三 CSS 浮动

是style中的常用属性

float属性

* left
* right

流式布局

<div style="float:left;width: 200px; height: 200px;background-color: red;">辣鸡</div>

p.s
浮动的元素会脱离正常的文档流，在正常的文档流中不占空间，所以会覆盖在文档流之上

clear属性

both 两边都不允许浮动
left 左边不允许浮动
right 右边不允许浮动

三盒子模型

盒子万物皆盒子

1.内边距

padding-top: 25px
padding-right
padding-bottom
padding-left
padding 25px 上下左右
padding 25px 30px 上下左右
padding 10px 20px 30px 上右下顺时针左取右的值

2.外边距

margin-top:25px
margin-right
margin-bottom
margin-left

3.绝对定位

position:absolute（必须先设置这个以下设置才有效）
top:控制距离顶部的位置

四 JavaScript

概述

JavaScript是一种直译式脚本语言。
脚本语言：源码---->解释执行
HTML：决定了页面的框架
CSS：用来美化页面
JS：提供用户的交互

JS的组成

ECMAScript : 核心部分 ,定义js的语法规范

DOM: document Object Model 文档对象模型 , 主要是用来管理页面的

BOM : Browser Object Model 浏览器对象模型, 前进,后退,页面刷新, 地址栏, 历史记录, 屏幕宽高

JS的输出

alert() 直接弹框
document.write() 向页面输出
console.log() 向控制台输出
innerHTML: 向页面输出
获取页面元素: document.getElementById(“id的名称”);
JS声明变量:
- var 变量的名称 = 变量的值
JS声明函数:

var 函数的名称 = function(){	
	}
function 函数的名称(){
	}

五自己编写时出现的错误

function拼写错误；
文本输入框的内容没有用.value()方法取出就直接使用；
form标签接受校验函数时没有加return，应为<form action="..." onsbumit ="return checkOut()>"
提交按钮类型为type="submit"
弹出框的函数为alert();

岩流

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WEB前端笔记2——CSS

一话题引入1 使用表格布局的缺陷嵌套层级太多,一旦出现嵌套顺序错乱，整个页面达不到预期的效果采用表格布局，页面不够灵活2 解决方法使用HTML的块标签(配合css一起使用才有用处)：div标签自动换行，默认占一行span标签内容显示在同一行二 CSS 概述Cascading Style Sheets：层叠样式表美化HTML页面，HTML是网页的骨架，C...
复制链接

扫一扫