侧边栏壁纸
博主头像
惊羽博主等级

hi ,我是惊羽,前生物学逃兵,现系统工程沉迷者 . 贝壳签约工程师 , 曾被雇佣为 联拓数科 · 支付研发工程师 、京东 · 京东数科 · 研发工程师、中国移动 · 雄安产业研究院 · 业务中台技术负责人 .

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

css(1) - 简介

惊羽
2021-03-16 / 0 评论 / 0 点赞 / 139 阅读 / 1,455 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2021-06-18,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

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
广告 广告

评论区