css一点基础知识(笔记3)

mac2024-03-05  29

CSS基础知识

基础概念.

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力

使用CSS有3种方式

(1)行内样式

使用style属性,只是对当前标签有效,页面内容和样式高度耦合的。写在行内

(2)内部样式

在head中使用style标签,当前页面有效,内容和样式一定程度分离,但是不彻底,css代买写在hea的style标签中。 优点:方便在同页面中修改样式。 缺点:不利于在多页面将共享复用代码及维护,对内容与样式的分离也不够彻底。

(3)外部样式

将样式写到一个单独CSS文件中,需要用到HTML文件,引用它即可。

实现了内容与样式的完全分离. 优点:结构化样式分离,好维护 样式重用 多个页面使用

基础属性

字体属性

font-style:字体(斜体)

font-variant :字体的变化(大小写)

font-weight :字体粗细

font-size:字体大小

font –family:字体名称

文本相关属性

主要包含:

颜色:color、

对齐方式:text-algin、

修饰效果:text-decoration,

行高:line-height

背景相关

background-color;:背景颜色

background-image: url();:背景图片

background-repeat ;背景重复方式

background-position:背景位置

显示相关属性

隐藏元素的方法:

(1)Display:none,可以隐藏,并且不占位置

(2) visibility: hidden; 可以隐藏,但是位置还在

Display可以设置元素的显示模式

Display: inline-block

变成行内块标签:可以设置width和height,不会占满一行

Display: inline

变成行内标签,width和height设置无效,其空间取决于内容

内边距

Padding-top、Padding-right、Padding-bottom、Padding-left

Padding 50px 40px 30px 10px 上 右 下 左

Padding 50px 40px ;上下 左右

## 外边距margin

和内边距类似的

选择器

元素选择器

通过标签名作为选择器

Id选择器

一个页面上的标签,id是唯一的,不能重复

类选择器

需要在便签上使用class, class里头的名字可以重复

Css样式使用多次

Id选择器>类选择器>元素选择器

结构选择器

后代选择器:

可以选择一个元素的后代元素,这个元素的儿子,孙子,孙子的儿子。。。

子类选择:

某一元素,选中直接后代(儿子,孙子不要)

并选择器:

将相同的颜色放在一起,类名直接用逗号分隔

通配符选择器:

选中所有的标签,不建议使用。

兄弟选择器 (1)E + F

选中最近的一个“弟弟”元素,不选中自己 (2)E~F

选中所有的“弟弟”元素,不选中自己

CSS三大特性

继承 层叠性 优先级

input标签的:

action; 把数据提交给服务器的地址,

method ; 提交的方式(post , get ),

type中可以指定的 number tel 来指定数字 电话号码 或者使用date 来指定时间

含有text <input type=“text” name="username" placeholder=“请输入name” > name属性 会随提交(form)到其他页面 就是作为参数

password:密码

file: 上传文件

radio :单选按钮 只能单选 默认的是chacked =“checked”

checkbox 多选(方框) 复选按钮

textarea 一个区域的文本框 设置 cols 和rows 来定框的大小

style =reset-non 不重新设置大小;

select 标签 下拉列表 请选择 option 子标签;

提交按钮:submit

重置按钮:reset

普通按钮:botton

botton 按钮具有默认提交表单的功能,如果不指定type 就会提交表单

form 表单标签 提交的内容 包裹所需要提交的内容

action 属性 要提交的地址 # 代表是本地地址

method get 方式(默认的提交方式,,把请求方式拼接在请求页面,)

post方式(把请求方式封装在请求体中)

<form action="#" method="get" name="要提交参数的Key " ></form>

只有存在name时候才能 接收数据

必须要有name 才能够提交;

若是单选或者复选框,必须提供value ,

placeholder 是一种提示信息

最新回复(0)