Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >css基础系列

css基础系列

作者头像
达达前端
发布于 2019-07-03 06:24:57
发布于 2019-07-03 06:24:57
1.9K00
代码可运行
举报
文章被收录于专栏:达达前端达达前端
运行总次数:0
代码可运行

css基础系列

盒子模型

  1. 盒子模型的概念
  2. 高和宽的设置
  3. 边框的设置
  4. 内边距的设置
  5. 外边距的设置
  6. 盒子的计算
  7. 元素显示的方式

image.png

盒子模型:

border边框,margin外边距,padding内部距,content内容,width宽度。

高度: height: 长度值|百分比|auto 最大高度: max-height: 长度值|百分比|auto 最小高度: min-height:长度值|百分比|auto

image.png

image.png

边框的属性: 边框宽度:border-width 边框颜色:border-color 边框样式:border-style

image.png

image.png

边框属性:

border- left | right | top | bottom -width border ... -color border ... -style

image.png

image.png

image.png

image.png

image.png

content+padding = ie

image.png

doctype html 声明

display属性 inline显示内联元素,元素前后没有换行符 block显示块级元素,元素前后有换行符

内联元素使用width和height属性有效。 inline-block行内块元素。

ie 盒子模型和标准 w3c 盒子模型

inline-block 行内块元素,元素呈现为inline,具有block相依特性,none元素不会被显示。

css文本样式:

text-align设置元素内文本的水平对齐方式。

text-align: left|right|center|justify

style="text-align:left;"

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
div{text-align:center;} <div><img src=""/></div>

image.png

文字基线:

image.png

image.png

line-height属性 设置元素中文本行高 语法: line-height:长度值|百分比

浏览器有默认的行高,不同浏览器默认行高不一样。

word-spacing 设置元素内单词之间的间距 letter-spacing 设置元素内字母之间的间距

image.png

image.png

image.png

文字样式:字体,font-family和font-size。

image.png

image.png

文字粗细: font-weight:normal|bold|bolder|lighter|100到900

文字样式: font-style:normal|italic|oblique

水平对齐: text-align: left|right|center|justify

背景,列表

image.png

背景图片重复问题: 设置元素的背景图片重复方式:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
background-repeat: repeat | no-repeat | repeat-x | repeat-y

背景图片显示方式: 设置元素的背景图片的显示方式:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
background-attachment: scroll | fixed

scroll: 默认值,背景图片随滚动条滚动 fixed:当页面的其余部分滚动时,背景图片不会移动

背景图片定位: 设置元素的背景图片的位置:

background-position:百分比|值|top|right|bottom|left|center

image.png

image.png

列表:

image.png

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
list-style-position: inside | outside

image.png

css中的float

float:left; float:right; float:none; float:inherit;

浮动变块状元素,浮动能环绕效果。

image.png

定位css

标准流,定位,浮动

浮动的问题如何解决

手动给父元素添加高度 通过clear清除内部和外部浮动 给父元素添加overfloat属性并结合zoom:1使用 给父元素添加浮动

css中的position

image.png

css背景与列表

css背景样式 background-color:设置元素的背景颜色 background-image:把图像设置为背景 background-position:设置背景图像的起始位置 background-attachment:背景图像是否固定或者随着页面的其余部分滚动 background-repeat:设置背景图像是否重复以及如何重复 background:背景属性设置

css列表样式

list-style-type:设置列表项标志的类型 list-style-image:将图像设置为列表项标志 list-style-position:设置列表中列表项标志的位置 list-style:简写

背景样式 设置背景颜色和背景图片

背景颜色,设置元素的背景颜色

background-color:颜色 | transparent 背景图片 设置元素的背景图片 background-image: url | none

背景图片重复 background-repeat: repeat | no-repeat | repeat-x | repeat-y

背景图片显示的方式 设置元素的背景图片的显示方式 background-attachment: scroll | fixed

scroll:随着滚动条滚动,fixed:背景图片不会移动

背景图片定位 background-position: 百分比 | 值 | top | right | bottom | left | center

background: background-color background-image background-repeat background-attachment background-postion

列表项,list-style-type:关键字 | none list-style-image: url | none list-style-position : inside | outside

list-style: list-style-type list-style-position list-style-image

div, ul, li, dl, dt, dd, img

html,css,javascript关系

html是网页内容的载体,css样式是表现,javascript是行为。

css优先级 行内样式>内部>外部

css选择器 标签选择器,全局选择器,类选择器,群组选择器,id选择器,后代选择器

群组选择器

image.png

image.png

链接伪类 :link 未访问 :visited 已经访问 :hover 鼠标悬停 :active 激活

css继承和层叠

从父元素那继承部分css属性 css层叠可以定义多个样式

选择器的权重

标签选择器1 类和伪类10 id选择器100

通配符0 行内样式1000

image.png

这种声明高

image.png

id不要滥用,适当使用class

css导入式@import 外部css样式

css字体和文本样式

文字:字体,字体大小,颜色,加粗等 文本:行高,对齐方式,文本修饰等

字体:font-family 文字大小:font-size 文字颜色:font-color 文字粗细:font-weight 文字样式:font-style: normal | italic | oblique

水平对齐: text-align: left | right | center | justify

css中的浮动

float: left | right | none | inherit 继承

css中的position

position: static | relative | absolute | fixed | inherit

使用z-index要有position: absolute

盒子模型: 盒子模型概念,内边距设置,高和宽的设置,边框的设置,外边距设置,盒子的计算,元素显示的方式。

border-width: thin | medium | thick border-color: 颜色 | transparent

display: inline | block | inline-block | none

结言

好了,欢迎在留言区留言,与大家分享你的经验和心得。

感谢你学习今天的内容,如果你觉得这篇文章对你有帮助的话,也欢迎把它分享给更多的朋友,感谢。

作者简介

达叔,理工男,简书作者&全栈工程师,感性理性兼备的写作者,个人独立开发者,我相信你也可以!阅读他的文章,会上瘾!,帮你成为更好的自己。长按下方二维码可关注,欢迎分享,置顶尤佳。

感谢!承蒙关照!您真诚的赞赏是我前进的最大动力!

这是一个有质量,有态度的公众号

喜欢本文的朋友们

欢迎长按下图关注订阅号

收看更多精彩内容

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.04.11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
css3系列-2.css中常见的样式属性和值
如果你是新手的话可能对盒子模型,外边距内边距都不熟悉,这一部分内容在学的时候相对来说比较吃力!如果有问题可以私聊或者留言评论给我,我帮你解决哦!
全栈学习笔记
2022/03/31
1.5K0
「学习笔记」CSS基础
「3. CSS」CSS(Cascading Style Sheets)通常称为CSS样式表或层叠样式表(级联样式表)。
小城故事
2023/03/10
3.5K0
CSS笔记
link rel=”stylesheet” href=”文件名” margin:0px auto;(块级元素居中)和width:的组合 写2个数:第一个代表上下,第二个代表左右 写3个数:第一个代表上,第二个代表左右,第三个下 写4个数:上,右,下,左 text-align:center;(行级元素居中) list-style:none (去除符号) clear:both(去除浮动) overflow:hidden;(超过大小就不显示) overflow:scroll 滚动条 border:none;outline:none;去除按钮边框
小城故事
2023/02/27
8800
CSS基础知识巩固你的前端基础
CSS基础知识 css,英文 Cascading Style Sheets,中文名:级联样式表。层叠样式表。 css是一种表现语言,是对网页语言的补充。 css用于网页的风格设计,包括字体,颜色,位置等。 css使用的4中方式:引入外部样式文件,导入外部样式文件,使用内部样式定义,使用内联样式定义。 引入外部样式文件: <link type="text/css" rel="stylesheet" href="css样式文件的url"/> 导入外部样式文
达达前端
2022/04/13
2.2K0
Web前端开发CSS笔记
CSS引用:直接引用 直接在HTML标签的后面加上style类型声明即可,多个类型请用分号隔开.
王 瑞
2022/12/28
2.6K0
Web前端开发CSS笔记
CSS入门?一篇就够了!
CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。
对话、
2022/02/22
5.5K0
CSS入门?一篇就够了!
css基础
如一个div元素可以添加多个样式,一个样式可以重复添加在一个元素上,以优先级最高|最近的为主
wolf
2020/09/21
1.4K0
IT课程 CSS基础 019_HelloCSS
CSS(Cascading Style Sheets,层叠样式表)和 HTML 类似,CSS 也不是真正的编程语言,甚至不是标记语言。CSS 是一门样式表语言,用于为 HTML 元素添加样式,描述 HTML 文档外观,控制 HTML 文档元素的颜色、大小、字体、布局等。
zhaoJian.Net
2024/04/03
1940
IT课程 CSS基础 019_HelloCSS
02 . 前端之CSS
外部样式就是讲css写在一个单独的文件中,一般以.css结尾,就叫css文件,然后在html页面进行引入即可,推荐使用此方式:
iginkgo18
2020/09/27
1.6K0
02 . 前端之CSS
CSS学习笔记(基础篇)
CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表)
Daotin
2018/08/31
4.8K0
CSS学习笔记(基础篇)
前端(二)-CSS
border-collapse 属性是用来设置 table 表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示。
化羽羽
2022/10/28
2.1K0
前端之CSS内容
一、CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素。 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染)。 二、CSS语法 1
新人小试
2018/04/12
5.5K0
前端之CSS内容
CSS3入门
https://www.runoob.com/css/css-tutorial.html
Breeze.
2022/06/27
1.8K0
CSS3入门
前端学习笔记之CSS属性设置 CSS属性设置
一 字体属性 1、font-weight:文字粗细 取值 描述 normal 默认值,标准粗细 bord 粗体 border 更粗 lighter 更细 100~900 设置具体粗细,400等同于normal,而700等同于bold inherit 继承父元素字体的粗细值 2、font-style:文字风格 normal 正常,默认就是正常的 italic 倾斜  3、font-size:文字大小 fs:一般是12px或13px或14px 注意: 1、通过font-size设置文字大小一定要带单位
Jetpropelledsnake21
2019/02/15
6.3K0
CSS入门学习笔记+案例
使用单独的 .CSS 文件定义,然后在页面中使用 link标签 或 @import指令 引入
全栈程序员站长
2022/08/15
1.6K0
CSS入门学习笔记+案例
CSS
CSS的四种引入方式: 一、行内样式 <div style="background-color: blue;color: brown">cairui</div> 二、 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ background-color: blue; color:
用户1173509
2018/01/17
1.5K0
CSS
CSS
  我们可以通过不同的选择器来选择标签,如果多个选择器选中了同一标签时,该以那个选择器来渲染标签呢?于是就牵扯到选择器的优先级问题。
py3study
2020/02/10
1.6K0
CSS总结
  1.继承:子元素继承父元素的某些样式(因为有些元素有默认值,所以它们就不用继承父元素的)。
阿豪聊干货
2018/08/09
2.4K0
Web前端基础(03)
本节所有的代码: https://download.csdn.net/download/qq_44273429/12729648 未完待续,,, 下一节链接: Web前端基础(04)
海拥
2021/08/23
5530
前端学习笔记之CSS知识汇总 CSS介绍
CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素。
Jetpropelledsnake21
2019/02/15
2.3K0
相关推荐
css3系列-2.css中常见的样式属性和值
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验