做网站的公司哪家昆山建设工程招聘信息网站

当前位置： 首页 > news >正文

做网站的公司哪家,昆山建设工程招聘信息网站,百度搜索入口官网,长兴建设局网站目录 前言 正文 CSS基础介绍#xff1a; CSS选择器#xff1a; 元素选择器#xff1a; id和class选择器#xff1a; 后代选择器和群组选择器#xff1a; 盒子模型 content#xff1a; padding#xff1a; border#xff1a; margin#xff1a; 字体样式 …目录 前言 正文 CSS基础介绍 CSS选择器 元素选择器 id和class选择器 后代选择器和群组选择器 盒子模型 content padding border margin 字体样式 font-family font-weight font-style 文字样式 text-indent text-align line-height 图片样式 文字环绕 列表样式 超链接样式 超链接伪类 常用的伪类 鼠标样式 背景样式 背景颜色 背景图片 background-position 浮动布局 什么是文档流 什么是正常文档流 Float 清除浮动 作用 使用 其他方法 定位布局 四种方式 子绝父相 固定定位 相对定位 绝对定位 总结 前言 精读一本书胜过看N个视频。 这次看的书是 吴振杰的《Web前端开发精品课 HTML CSS JavaScript基础教程》 17年出版的。 正文 CSS基础介绍 CSS的定义 全称Cascading Style Sheet 中文名层叠样式表 与HTML的关系 HTML是骨架CSS是外观JS是行为 版本 CSS1.0、CSS2.0、CSS2.1、CSS3.0共四个版本 其中CSS2.1是CSS2.0的修订版。 跟HTML4和HTML5的关系一样——HTML5是对HTML4的补充而CSS2和CSS3也是一样的。 引入方式 外部样式表link在head标签中使用 内部样式表style在head标签内使用 行内样式表行内style在元素标签内使用 其中优先级最高的是行内样式表不推荐使用!important 有些网站比如说商城的商详页是先出结构再加载CSS的原因是 引入方法不同加载顺序不同 CSS选择器 含义 选择你要改变的元素一共有五种选择器。 CSS选择器 元素选择器、id选择器、class选择器、后代选择器、群组选择器 元素选择器 直接选中元素就是元素选择器。 比如说div { style … }。 id和class选择器 id具有唯一性一个页面只能出现一个同名id定义和使用都需要加上# 而class允许出现重复定义和使用都需要加上.。 理解id是身份证class是名。 这跟我们英文学的是一样的id是身份证的意思而class翻译是类名。 后代选择器和群组选择器 后代选择器选择的是父元素下的某一子元素这些元素之间是有关联的要么就是父子元素要么就是兄弟元素两者之间使用空格隔开。 群组选择器选择的是任意两个及以上元素这些元素之间没有任何关联两者之间使用逗号隔开。 盒子模型 什么是盒子模型 一个元素所占据的空间。 怎么理解盒子模型 页面中的每一个元素都可以看成是一个盒子并且占据着一定的空间并且这些盒子会互相影响。 盒子模型的组成 主要内容content内容、padding内边距、border边框、margin外边距 次要内容content的width、height content 内容区是CSS盒子的主要构成部分可以是图片、文本等。 内容区是盒子模型必不可少的组成部分其他三部分padding、border、margin可选。 内容区的三个重要属性width、height、overflow宽高不包括padding。 只有块元素才有宽高行内元素是无法设置宽高的需要转换类型。 padding 内边距指的是内容区和边框之间的空间可以看成是背景区域。 border 内外边距的“墙”。 border: width, style, color可以直接设置边框的粗细、样式实线、虚线、双线颜色。 也可以修改直接某一边上下左右的边框样式。 margin 两个盒子之间的距离使得元素不用紧挨着一起。 margin允许负数值从而使得两个盒子之间产生重叠的效果。 字体样式 常见的字体属性 font-family字体类型 font-size字体大小 font-weight字体粗细 font-style字体风格斜体 color字体颜色 font-family 常用的字体 中文微软雅黑、宋体 英文Times New Roman、Arial、Verdana 特别注意 如果字体类型只有一个英文单词不需要双引号 如果是多个英文单词或者是中文则需要加双引号。 多个字体从左到右顺序进行选择显示第一个字体库缺失就第二个以此类推。 font-weight 属性值100-900的整数数值、关键字normal、lighter、bold、bolder。 一般都是采用数值的形式100相当于lighter400相当于normal700相当于bold900则是bolder。 在实际开发中一般都是使用bold。 font-style 属性值normal、italic斜体、oblique斜体 italic和oblique的区别不是所有字体都有italic这个属性的如果不起效果就是用oblique即可。 在实际开发中很少使用这个属性。 文字样式 与字体样式的区别 字体样式针对文字本身的显示效果注重个体效果。 文本样式针对整个段落的排版效果注重整体效果。 常见的属性 text-indent首行缩进 text-align水平对齐 text-decoration文本修饰 text-transform大小写 line-height行高 text-indent 前提p元素的首行是不会自动缩进的 例子font-size14px; text-indent: 28px 字体大小是14而首行缩进的像素值恰好是它的两倍刚好缩进两个字符。 text-align 水平方向一般都是left、center、right没有middlemiddle是垂直方向上的。 line-height 用于控制每行文本的高度可以实现垂直方向上居中。 但不是行间距因为它只包含文本的高度不包含文字的上下间距。 图片样式 图片大小控制使用width、height属性。 图片边框border。 图片对齐方式 水平方向text-align一般都是用center这个属性值。 垂直方向vertical-align。 注意 1.想要图片居中对齐应该在其父元素上设置水平居中而不是img标签上进行设置。 2.vertical-align属性定义的是行内元素或文本相对于该元素的垂直方式而不是设置该元素的垂直方式。 文字环绕 在网页布局中常常需要图文混排的效果。 这个时候就需要用到Float属性属性值left、right。 注意 属性值里没有center属性写在img里且改变的是图片的位置。 img { float: right }图片是在右侧而不是左侧。 列表样式 为什么要学列表样式 结构和样式应该是分离的。 最常用的属性值list-style-typenone。 此外还可以自定义列表符号。 list-style-image: url(图片路径) 不常用经常用的是iconfont。 超链接样式 超链接在鼠标点击的不同时期有着不同的状态 默认字体蓝色带有下划线 点击时不松手字体为红色带有下划线 - 一瞬间的事情 点击后字体为紫色带有下划线 超链接伪类 a:link默认样式未访问样式。 a:visited访问后的样式。 a:hover鼠标经过样式。 a:active点击激活时的样式点击的一瞬间。 注意必须要按照这样的排序进行设置否则部分样式可能失效。 常用的伪类 a:link a:hover 注意对于未访问状态我们可以省略:link直接写a。 怎么去掉超链接默认的下划线 text-decoration: none; 鼠标样式 属性cursor 常用的属性值default默认、pointer常用、text、crosshair、wait、help 背景样式 包含背景颜色、背景图片。 背景颜色 属性background-color 属性值颜色关键字、rgb数值、#十六进制数值 注意color用于定义文字颜色background-color用于定义背景颜色。 背景图片 常见属性 background-image背景图片地址 background-repeat背景图片重复水平/垂直 background-position背景图片位置常用于精灵图制作动画 background-attachment背景图片固定 background-position 属性值像素值、关键字 注意要同时设置水平和垂直方向否则不起效果。 关键字top / bottom、left/right、center的两两组合共8个再加上(center, center)即9个。 浮动布局 什么是文档流 表现为元素在页面中出现的先后顺序。 文档流分为正常文档流、脱离文档流。 什么是正常文档流 将一个页面从上到下分为一行一行的其中块元素独占一行相邻行内元素在每一行中按照从左到右的排列直到该行排满为止。 什么是脱离文档流 脱离了正常文档流的文档流就是脱离文档流。 怎么算脱离 使用了Float属性。 Float CSS布局的最佳利器之一可以通过浮动来快速灵活地定位页面元素以达到布局网页的目的。属性值有left和right两个。 注意 如果给块元素设置浮动那么宽度不再是独占一行了而是脱离于文档流“漂浮”在文档之上所以也称为浮动。 宽度由内容撑开。 作用 常用于实现水平方向上的并排布局两列布局、三列布局、多列布局。 清除浮动 属性clear 属性值left、right、both常用 作用 清除兄弟元素浮动后带来的布局影响。 使用 我们一般都是在浮动元素后面再增加一个空元素然后设置clear: both来清除浮动。 其他方法 overflowhidden 伪元素 定位布局 浮动布局虽然灵活但是不易控制。 而定位布局最大的优势就是精准定位。 属性 position。 四种方式 固定定位fixed 相对定位relative 绝对定位absolute 静态定位static默认   这四种方式刚好就是position的属性值。 子绝父相 在常见的布局中如果子盒子采用了绝对定位那么父盒子就要采用绝对定位这样才不会产生布局问题相关内容请查看站内其他文章。 固定定位 含义元素被固定不会随着滚动条的拖动而改变位置。 场景回到顶部按钮 参考对象浏览器的四条边 使用四个属性top/bottom、left/right下同 相对定位 含义元素位置相对于元素原始位置计算而来的 参考对象元素的原始位置 使用同上 绝对定位 含义精确定位 参考对象浏览器的四条边 使用同上 注意变成绝对定位之后元素完全脱离文档附近元素会认为该元素不存在从而产生了层级z-index问题。 总结 在本文中并没有给出太多CSS属性去掉了一些不常见的CSS属性。 当然啦还有很多高级属性都是跟动画相关的这需要更多时间去学习。 如果仅靠5千不到的文字就能把CSS叙说完这行业也不会这么卷。 但是这部分的知识已经足够大部分人去完成一个不错的页面了或者是应对考试。 精读一本书胜过看N个视频。 因为视频很多都是讲实操的但是书本有个完整清晰的脉络你能够掌握更多基础知识。 就这样吧咱们下期再见