侧边栏壁纸
博主头像
buukle博主等级

布壳儿

  • 累计撰写 106 篇文章
  • 累计创建 15 个标签
  • 累计收到 9 条评论

目 录CONTENT

文章目录

css(1) - 简介

administrator
2021-03-16 / 0 评论 / 0 点赞 / 187 阅读 / 2193 字

1. css定义和作用

1.1 概念

层叠样式表(英文全称:Cascading Style Sheets)
层叠:层层覆盖
css对html进行修饰的 如果同一html 被不的css样式进行修饰 样式冲突时 使 用优先级高的 样式不冲突 样式都使用
样式:样子
表:样式的集合css文件

1.2 作用

css的作用就是对html进行修饰,在浏览器对html解析和渲染完成后,进一步美化这些节点的显示效果;让我们用户看起来更美观,高大上之类的,好的css编码会使用户体验度会飙升;

2.css的运行环境

浏览器---内置css解析器---兼容性

3.css的引入方式和书写规范

3.1 引入方式指的就是css怎样个html进行联系

(1)内嵌样式
在html标签中使用style属性引入css样式

style是html的属性
color和font-size是css的属性

3.2 书写规范:

css样式语法:属性:属性值 多个属性之间使用分号;隔开

3.2.1 外联样式

在html中的head标签中 使用 style 标签引入css样式
优缺点:
优点: 复用性强
缺点: 书写不太方便,可读性稍差

3.2.2 内嵌样式

在html中的普通标签中,使用style = "" 属性直接硬编码样式
优缺点:
优点:书写方便 可读性强(直观的看到标签的样式是什么)
缺点:没有复用性

2、css的选择器

选择器的作用:精确去选择html标签的

2.1 基本选择器

2.1.1 标签选择器

语法:标签名称{属性:属性值}

2.1.2 id选择器

语法:#id的值{属性:属性值}

2.1.3 类选择器

语法:.class的值{属性:属性值}
优先级
id选择器>类选择器>标签选择器
注意:基本选择器的优先级,其他样式对同一标签进行修饰采用就近原则

2.属性选择器

3.层级选择器

4.伪元素选择器(a标签的伪元素)
a标签的伪元素 a标签的不同状态

3. css的常用的属性

3.1 文字和文本属性

color:颜色
font-size:字号
font-family:相当于html的face 字体类型
text-decoration:线型
none:没有线
undeline:下划线

3.2 背景属性

背景颜色:background-color

背景图片:background-image 属性值写法固定 url(地址)

3.3 尺寸属性

width
height

3.4 边框属性

border-color
border-width:宽度
border-style:线型

border:border-width border-style border-color

3.5 显示属性

让标签显示或隐藏
display:none不显示 block:显示

3.6 浮动属性

div元素:
代表区域 没有任何样式

4. css的盒子模型---用于布局

开发中 div+css(浮动+定位position)+盒子模型=页面布局

padding:内边距
margin:外边距

0
  1. qrcode alipay
  2. qrcode weixin

评论区