web前端学习day_02:CSS:三种使用方式/选择器/颜色/背景图片/查看样式/文本/元素显示方式/盒子模型/定位方式/行内对齐/显示层级/防溢出

CSS : Cascading Style Sheet 层叠样式表. 作用: 美化页面
- CSS
- - 如何在html页面中添加css样式代码?总共有三种方式:
  - 1.选择器
  - 2.选择器练习:
  - 3.颜色赋值
  - 4.背景图片
  - 5.如何查看目标页面元素样式(F12)
  - 6.文本和字体相关
  - 7.元素显示方式display
  - - 圆角
  - 8.盒子模型
  - - 8.1盒子模型之宽高
    - 8.2盒子模型之外边距
    - 8.3盒子模型之外边距
    - 8.4盒子模型之边框
    - 8.5盒子模型之内边距
  - 8-盒子模型回顾:
  - 9.定位方式:
  - - 9.1文档流定位(默认)
    - 9.2相对定位
    - 9.3绝对定位
    - 9.4固定定位
    - 9.5浮动定位
  - 10.行内元素的垂直对齐方式vertical-align
  - 11. z-index样式
  - 12. overflow溢出设置

CSS

Cascading Style Sheet 层叠样式表. 作用: 美化页面

如何在html页面中添加css样式代码?总共有三种方式:

内联样式: 在标签的style属性中添加css样式代码, 弊端:不能复用
内部样式: 在head标签里面添加style标签,标签体内写样式代码,弊端:只能在当前页面复用
外部样式: 在单独的css文件中写样式代码,在html页面中通过link标签引入css文件,可以实现多页面复用
工作中外部样式用的最多,学习过程中更多使用内部样式

1.选择器

标签名选择器

格式: 标签名{样式代码}
作用: 选取页面中所有同名标签

id选择器

格式: #id{样式代码}
作用: 如果需要给页面中某一个元素添加样式,则给元素添加id属性,通过id选择器选中

class选择器

格式: .class{样式代码}
作用: 用于选取页面中多个元素(需要给多个元素添加相同的class属性值)

分组选择器

格式: div,#id,.class{样式代码}
作用: 可以将多个选择器合并成一个选择器

属性选择器

格式: 标签名[属性名=‘值’]{样式代码}
作用: 可以通过元素的属性获取元素

子孙后代选择器

格式: body div span{样式代码}
作用: 选取body里面的div里面的所有span(包括子元素span和所有后代span)

子元素选择器

格式: body>div>span{样式代码}
作用:选取body里面的div里面的子元素span

伪类选择器

格式: 标签名:link/visited/hover/active{样式代码}
作用: 选取元素的状态状态包括(未访问状态,访问过状态,悬停状态,点击状态)

任意元素选择器

格式: *{样式代码}
作用: 选取页面中所有元素

2.选择器练习:

把d1字体改红色
把d2,s2,h2,水煮鱼字体改绿色
把密码框背景改红色
把水煮肉,水煮鱼,红烧肉,d1背景改黄色
把h2和文本框背景改蓝色

3.颜色赋值

三原色: 红绿蓝,red green blue, rgb 每个颜色取值范围0-255,
颜色单词赋值 red
6位16进制赋值 #ff0000 红255 绿0 蓝0
3位16进制赋值 #f00 每一位重复一次 f00=ff0000
3位10进制赋值 rgb(255,0,0)
4位10进制赋值 rgba(255,0,0,0-1) a=alpha透明度取值0-1 值越小越透明

4.背景图片

background-image:url(路径); 设置背景图片
background-size:200px 300px; 设置背景图片尺寸
background-repeat:no-repeat; 禁止重复
background-position:50% 100%; 背景图片位置

5.如何查看目标页面元素样式(F12)

使用谷歌浏览器

在元素上面右键->检查
右侧窗口出现后点击小箭头拾取器选中想查看的元素

6.文本和字体相关

文本修饰: text-docoration:overline上划线/underline下划线/line-through删除线/none去掉修饰
文本对齐方式: text-align: left/right/center;
文本颜色: color:red;
文本阴影: text-shadow: 颜色 x偏移值 y偏移值浓度(值越大越模糊)
行高: line-height:20px; 可以通过行高实现垂直居中
字体大小: font-size:20px;
字体加粗: font-weight:bold加粗/normal去掉加粗;
字体设置: font-family:xxxx,xxx,xxx,xxxx; font:20px xxx,xxx,xxx;
斜体: font-style: italic;

7.元素显示方式display

block: 块级元素 ,独占一行,可以修改宽高, 包括: div h1-h6 p
inline: 行内元素, 共占一行,不能修改宽高, 包括: span b i small 超链接等
inline-block:行内块元素,共占一行,并且可以修改宽高, 包括: 图片img, input

每个元素都有自己默认的显示方式,但是有些场景需要修改元素的显示方式,比如行内元素是不能修改宽高的如果有需求必须改宽高则只能先修改元素的显示方式为block或inline-block

圆角

border-radius:5px; 值越大越圆当值大于宽高一半时为圆形

8.盒子模型

盒子模型=宽高+外边距+边框+内边距
宽高: 控制元素大小
外边距: 控制元素的位置
边框: 控制边框效果
内边距: 控制元素内容的位置

8.1盒子模型之宽高

width/height赋值,赋值方式两种:

像素
上级元素百分比

行内元素是不能修改宽高的

8.2盒子模型之外边距

外边距:元素距上级元素或相邻兄弟元素的距离称为外边距. 作用: 控制元素的显示位置
赋值方式:

单独某个方向赋值 margin-left/right/top/bottom: 10px;
四个方向赋值 margin:10px;
上下和左右 margin:10px 20px; 上下10 左右20 margin:0 auto; 块级元素居中
上右下左四个方向 margin:10px 20px 30px 40px 顺时针上右下左
###CSS的三大特性
继承:元素可以继承上级元素的文本和字体相关样式,部分标签自带效果不受继承影响比如:超链接的字体颜色 h1-h6字体大小都不受继承影响
层叠:多个选择器有可能选择到同一个元素,给元素添加样式时,如果添加的样式不同则全部层叠生效,如果样式相同则只能生效一个,由优先级决定哪一个生效
优先级:作用范围越小优先级越高, id>class>标签名>继承(属于间接选中)

8.3盒子模型之外边距

元素距上级元素或相邻兄弟元素的距离为外边距.用来控制元素的显示位置
margin-left/right/top/bottom:10px; 单独某一个方向赋值
margin:10px 四个方向赋值
margin:10px 20px 上下10 左右20
margin:0 auto: 块级元素居中
margin:10px 20px 30px 40px; 上右下左顺时针
左右相邻外边距累加,上下相邻外边距取最大值
粘连问题: 当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距,会出现粘连问题,通过给上级元素添加overflow:hidden方式解决
行内元素上下外边距无效

8.4盒子模型之边框

赋值方式:
1. border: 粗细边框样式颜色; 四个方向添加边框
2. border-left/right/top/bottom: 粗细边框样式颜色; 单独某个方向添加边框
圆角: border-radius:5px; 值越大越圆

8.5盒子模型之内边距

什么是内边距: 元素边缘距内容的距离, 用来控制元素内容的位置
赋值方式:(类似外边距)
1. padding-left/right/top/bottom: 10px; 单独某个方向赋值
2. padding:10px; 四个方向赋值
3. padding:10px 20px; 上下10 左右20
4. padding:10px 20px 30px 40px; 上右下左
如果需要移动元素的子元素位置有两种方式:
1. 给元素添加内边距移动,会影响元素宽高
2. 给子元素添加外边距移动,不会影响元素宽高,但是需要考虑粘连问题

8-盒子模型回顾:

宽高width/heigh: 控制元素的显示大小
外边距margin:控制元素的显示位置
边框border: 控制边框效果
内边距padding:控制元素内容的位置

9.定位方式:

9.1文档流定位(默认)

又称为静态定位,元素默认的定位方式为文档流定位
格式: position:static;
元素显示特点: 块级元素从上往下排列行内元素从左向右排列
如何控制元素的显示位置?
通过给元素添加外边距

9.2相对定位

格式: position:relative;
元素显示特点: 元素不脱离文档流(不管元素移动到什么位置原来的位置仍然占着)
如何控制元素的显示位置?
通过left/right/top/bottom 让元素相对于初始位置做位置偏移.

9.3绝对定位

格式: position:absolute;
显示特点: 元素脱离文档流(元素会把之前所占位置让出)
如何控制元素的显示位置?
通过left/right/top/bottom 让元素相对于窗口或某一个上级元素做位置偏移(需要给上级元素添加position:relative)

9.4固定定位

当元素需要固定在窗口的某个位置的时候使用固定定位
格式: position:fixed;
显示特点:元素脱离文档流
如何控制元素的显示位置?
通过left/right/top/bottom 让元素相对于窗口做位置偏移

9.5浮动定位

-格式: float:left/right;

显示特点: 元素脱离文档流,元素从当前所在行向左或向右浮动,当撞到上级元素边缘或其它浮动元素停止.
当需要将纵向排列的元素改成横向排列时使用浮动定位
如果元素的所有子元素全部浮动则自动识别的高度为0,给元素添加overflow:hidden;解决此问题
浮动元素受上级元素宽度影响,如果一行装不下会自动换行,换行时有可能被卡主

10.行内元素的垂直对齐方式vertical-align

baseline 基线对齐 (横格本第三条线)
top 上对齐
middle 中间对齐
bottom 下对齐

11. z-index样式

通过此样式控制元素显示层级,层级越高元素显示越靠前
需要结合position属性使用,一般position:relative; 因为使用其它值元素会脱离文档流会对之前效果产生影响.

12. overflow溢出设置

hidden: 超出范围隐藏
visible(默认):超出范围显示
scroll: 超出范围滚动显示

web前端学习day_02:CSS:三种使用方式/选择器/颜色/背景图片/查看样式/文本/元素显示方式/盒子模型/定位方式/行内对齐/显示层级/防溢出相关推荐

web前端学习中CSS，JS代码压缩
web前端要学习的知识有很多,前端基础要学习三个部分:HTML,CSS,JavaScript(简称JS),因此首先明确三个概念:HTML负责结构,网页想要表达的内容由html书写. CSS负责样式,网 ...
Web前端学习之 CSS基础二
Web前端学习之 CSS基础二 1. 2. 主体 3. 完整代码如下所示 4. 结束语 1. /* 权重是0 */* {font-size: 35px;text-align: center;color ...
web前端学习（CSS篇）
目录 CSS基础语法基本样式内联样式与内部样式内联样式外部样式及两种写法 CSS中的颜色表示法 CSS背景样式背景实现视觉差效果 CSS边框样式边框实现三角形 CSS文字样式 CSS段落样 ...
自学web前端怎么学？web前端学习路线css属性
自学web前端技术,如果才能找到一份web前端的工作.按照现在的招聘标准来看,无论你去哪个公司面试,你只需要满足他们公司的需求就可以.找到一份web前端工作需要掌握的内容如下: 首先是html,css ...
Web前端学习html css（一）
10.15 1.1 导学 1.拨云见日 html ,css, 切图流程, PC企业布局, PC游戏布局 2.溯本求源扩展html , 扩展css, html5新语法,css3新语法,兼容与hack ...
Web前端学习笔记——CSS京东案例、BFC
京东项目(一) 京东项目介绍项目名称:京东网项目描述:京东首页公共部分的头部和尾部制作,京东首页中间部分. 项目背景现阶段电商类网站很流行,很多同学毕业之后会进入电商类企业工作,同时电商类网站需 ...
web前端学习笔记（三）
HTML5:布局类标签 HTML是具有语义化的语言,针对网页的布局,有一类标签代表各种意义的"布局盒子".所有的布局类标签都主要用来构建页面的内容区域,是双标签类型,是双标签类型, ...
Web前端学习笔记（三）---白色/黑暗背景切换
效果图 HTML <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
【Web前端】JavaScript的三种弹出框：警告框、确认框、提示框
JavaScript有三种不同的弹出框:警告框.确认框.提示框 1.警告框:window.alert() 当需要确保用户收到某种信息时,可以使用警告框,用户必须点击警告框上的[确定]按钮,才能继续操作 ...

web前端学习day_02:CSS:三种使用方式/选择器/颜色/背景图片/查看样式/文本/元素显示方式/盒子模型/定位方式/行内对齐/显示层级/防溢出

CSS : Cascading Style Sheet 层叠样式表. 作用: 美化页面

CSS

如何在html页面中添加css样式代码?总共有三种方式:

1.选择器

2.选择器练习:

3.颜色赋值

4.背景图片

5.如何查看目标页面元素样式(F12)

6.文本和字体相关

7.元素显示方式display

圆角

8.盒子模型

8.1盒子模型之宽高

8.2盒子模型之外边距

8.3盒子模型之外边距

8.4盒子模型之边框

8.5盒子模型之内边距

8-盒子模型回顾:

9.定位方式:

9.1文档流定位(默认)

9.2相对定位

9.3绝对定位

9.4固定定位

9.5浮动定位

10.行内元素的垂直对齐方式vertical-align

11. z-index样式

12. overflow溢出设置

web前端学习day_02:CSS:三种使用方式/选择器/颜色/背景图片/查看样式/文本/元素显示方式/盒子模型/定位方式/行内对齐/显示层级/防溢出相关推荐

最新文章

热门文章