郑州网站建设公司招聘,网站内链wordpress插件,seo网络营销外包,网站开发作为固定资产怎么摊销前言
CSS是前端三件套之一#xff0c;在MarkDown中也完美兼容这些语法#xff1b;这篇文章是本人大一学习前端的笔记#xff1b;欢迎点赞 收藏 关注#xff0c;本人将会持续更新。 文章目录 Emmet语法#xff1a;CSS基本语法#xff1a;css语法结构只有3种#xff1a…前言
CSS是前端三件套之一在MarkDown中也完美兼容这些语法这篇文章是本人大一学习前端的笔记欢迎点赞 收藏 关注本人将会持续更新。 文章目录 Emmet语法CSS基本语法css语法结构只有3种选择器、样式属性和值css代码风格 添加css的方法CSS选择器基础选择器复合选择器 字体属性字体复合属性 背景颜色属性背景复合属性 文本属性CSS三大属性1、层叠性2、继承性3、优先级 盒子模型网页布局本质网页布局过程网页布局三大核心 盒子模型组成边框边框使用边框会影响盒子实际大小 内边框内边距的影响 外边距一些放在css首位的选择器圆角边框 简单盒子、文字阴影盒子阴影文字阴影 浮动标准流浮动 块元素、行内元素、行内块元素块元素行内元素行内块元素显示模式转换 定位边偏移静态定位了解相对定位 重要绝对定位重要子绝父相固定定位重要粘性定位了解 display 属性opacity属性z-index属性 Emmet语法
生成标签如div tab如果想同时生成多个标签如div*3如果有父子级标签如ul li兄弟关系标签如div p生成含有类名如.demo默认是div p.red生成含有顺序如div$*3如果想在标签内有内容{ }表示
CSS基本语法
css语法结构只有3种选择器、样式属性和值
css代码风格
样式格式重点展开格式样式大小书写全部用小写空格规范 空格
添加css的方法 链接外部样式 内部样式表控制一个页面 导入外部样式表 第一步建立一个css
stylelink relstyleheet href链接
/style内嵌样式控制一个
CSS选择器
分为基础选择器和复合选择器
基础选择器
标签选择器类选择器class 点开头)一个html标签中可以有多个多类选择武器id选择器#名一个html标签中只能有一个通配符选择器*
复合选择器
后代选择器子代选择器选择最近一个子元素 元素1(父)元素2(儿) 并集选择器 元素1元素2 伪类选择器 如a linka: visiteda: hovera: active(也是规范的顺序)
字体属性
font-familyfont-sizefont-styleitalic normal默认font-weight400 700font-variant(小写转为大写)
字体复合属性
fontfont-style fone-weight font-size/line-height font-family必须保留size和family顺序一定要严格
背景颜色属性
background-color background-color: 颜色取值 background-image: background-image: url(图像地址) background-repeat background-repeat: 取值取值默认no-repeat repeat-x repeat-ybackground-attachment固定或者滚动background-attachmentscroll/fixed background-position background-position位置取值位置取值数值和方向位置 注意数组一定是 X Y结构 background: rgba(0,0,0,0.5); 必须四个值
背景复合属性
background: 背景颜色 背景图片 背景重复 背景附件 背景位置顺序随意
文本属性
colortext-align: 值center left right text-decoration none默认 underline下划线 overline上划线 line-through删除线 text-indent px单位em单位 行间距line-height
CSS三大属性
1、层叠性
相同选择器给设置相同的样式此时一个样式就会覆盖层叠另一个冲突的样式。层叠性主要解决样式冲突的问题
原则
样式冲突遵循的原则是就近原则哪个样式离结构近就执行哪个样式不会冲突 2、继承性
CSS中的继承: 子标签会继承父标签的某些样式如文本颜色和字号。恰当地使用继承可以简化代码降低 CSS 样式的复杂性。
口诀龙生龙凤生凤老鼠生的孩子会打洞 3、优先级 注意点
权重是有4组数字组成,但是不会有进位。等级判断从左向右如果某一位数值相同则判断下一位数值。可以简单记忆法: 通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为 1000, !important 无穷大.继承权重为0.无论父类有多大权重
权重叠加
复合选择器会有权重叠加
div ul li--------- 0,0,0,3.nav ul li--------- 0,0,1,2a:hover---------0,0,1,1.nav a -------------- 0,0,1,1
盒子模型
网页布局的核心利用CSS摆盒子
content padding margin border
网页布局本质
利用CSS实现盒子模型
网页布局过程
先准备好相关的网页元素网页元素基本都是盒子 Box 。利用 CSS 设置好盒子样式然后摆放到相应位置。往盒子里面装内容
网页布局三大核心
盒子模型浮动定位
盒子模型组成
盒子模型把 HTML 页面中的布局元素看作是一个矩形的盒子也就是一个盛装内容的容器。 边框
边框使用
三部分宽度 样式 颜色 border-widthborder-colorborder-style solid实线边框dashed虚线框dotted点线边框 none 复合边框border无顺序上下左右边框如border-top重点border-collapse(控制相领的边框表格的细线边框) border-collapsecollapse 注意边框会影响盒子的实际大小
边框会影响盒子实际大小
边框会额外增加盒子实际大小需要根据实际情况布局
内边框 padding padding-toppadding-bottompadding-rightpadding-left padding的复合写性 padding1px 代表上下左右都是1pxpadding1px 2px 代表上下是1px左右是2pxpadding1px 2px 3px 代表上是1px下是3px左右是2pxpadding1px 2px 3px 4px 代表顺时针 内边距的影响 内容与边框有距离增加了内边距padding影响了盒子的实际大小解决方案改变height和width的大小或者不写height和width
外边距
margin 其他写法与padding一样外边距的典型运用 让盒子水平居中属性值为auto 外边距合并 嵌套关系父子关系的块元素父元素有上外边距同时子元素也有上外边距此时父元素会塌陷比较大 解决方案可以为父元素定义一个上边框可以为父元素定义内边框可以为父元素添加overflowhidden可以用浮动,定位 一些放在css首位的选择器 清除内外边距 * {margin0padding0
}ul-li不显示小圆点 li {list-stylenone
}圆角边框
border-radiuslengthlength数值/百分比正方形想要圆50%圆角矩形设置高度的一般就行了也可以分开写如border-top-left-radius也可以合起来写border-radius
简单盒子、文字阴影
盒子阴影
box-shadowh-shadow v-shadow blur spread color inset h-shadow v-shadow 必须有h水平阴影 v垂直阴影blur 模糊距离spread 阴影尺寸color 阴影的颜色 rgba000.3inset 将外部阴影改为内部种默认外部阴影
文字阴影
text-shadow其余同上
浮动
标准流
就是标签按照规定好默认方式排列最基本的页面布局
浮动
floatnone默认 left左浮动right右浮动 两个最重要的的特征 脱离标准普通流的控制移动到指定位置 托标浮动盒子不再保留原来的位置
块元素、行内元素、行内块元素
块元素
div最金典h1-h6pul、ol、dlformtable特点 独占一行高、宽度以及内边距都可以控制是一个融器注意p h1-h6 内不可以存在块元素
行内元素
astrongbrdelspan最经典textarea特点 一行可以多个高、宽不能设置默认宽就是本身内容宽度行内元素只能放在文本或者其它行内元素
行内块
imginputtd特点 默认文本高度高度、宽度都可以控制一行可以多个
元素显示模式转换
转为块元素displayblock转为行内元素displayinline转为行内块元素displayline-block
定位
定位将盒子定在某一个位置所以定位也是在摆放盒子按照定位的方式移动盒子
定位 定位模式 边偏移
定位模式用于指定一个元素在文档的定位方式。边偏移则决定了该元素的最终位置
边偏移
边偏移属性示例描述toptop: 80px顶端偏移量定义元素相对于其父元素上边线的距离bottombottom: 80px底部偏移量定义元素相对于其父元素下边线的距离leftleft: 80px左侧偏移量定义元素相对于其父元素左边线的距离rightright: 80px右测偏移量定义元素相对于其父元素右边线的距离
静态定位了解
静态定位是元素的默认定位方式无定位的意思
语法
选择器 {position: static;}静态定位按照标准流特性摆放位置无边偏移静态定位在布局中很少用
相对定位 重要
相对定位是元素在位移位置的时候是相对于他原来的位置来说的
语法
选择器 {position: relative;
}相对定位的特点重要
它是相对于自己原来的位置来移动的移动位置的时候参照点是自己原来的位置)原来在标准流的位置继续占有
绝对定位重要
绝对定位是元素在移动的时候是相对于它祖先元素来说的
语法
选择器 {position: absolute;}特点重要
如果没有父元素或者祖先元素则以浏览器为准定位如果祖元素有定位相对、绝对、固定定位则以最近定位元素为参考点绝对定位不再占有原先位置
子绝父相
因为父亲要占有位置因此是相对定位子盒子不需要占有位置则是绝对定位
固定定位重要
固定定位是元素固定于浏览器可视区位置
选择器 {position: fixed;}特点重要
跟父元素没有关系不随滚动条滚动固定位置不在占有原先的位置
粘性定位了解
语法
选择器 {position: sticky;
}display 属性
display: none; 隐藏对象display: block;
opacity属性
颜色透明
opacity: .5;
z-index属性
提高层级
z-index: 999; 999最高层级
