做静态网站用什么软件凡科网官网首页

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

做静态网站用什么软件,凡科网官网首页,上海优化排名蓝天seo,绍兴网站建设seoCSS 一、基础认知 1、CSS引入方式 1.1、内嵌式#xff08;CSS写在style标签中#xff09; style标签虽然可以写在页面的任意位置#xff0c;但是通常约定写在head标签中 2.2、外联式#xff08;CSS写在一个单独的.css文件中#xff09; 需要通过link标签在网页中引入…CSS 一、基础认知 1、CSS引入方式 1.1、内嵌式CSS写在style标签中 style标签虽然可以写在页面的任意位置但是通常约定写在head标签中 2.2、外联式CSS写在一个单独的.css文件中 需要通过link标签在网页中引入 2.3、行内式写在标签的style属性里 一般配js使用不常用 二、基础选择器 1、标签选择器 1.1、结构 标签名 {css属性: 属性值; }1.2、作用 通过标签名找到页面中所有这类标签设置样式 1.3、注意点 便签选择器选择的是一类标签而不是单独的某一个标签选择器无论嵌套的关系有多深都能找到对应的标签 2、类选择器 2.1、结构 .类名 {css属性: 属性值; }2.2、作用 通过类名找到页面中所有带有这个类名的标签设置样式 2.3、注意点 所有便签上都有class属性calss属性的属性值称为类名类名可以由数字、字母、下划线、中划线组成但是不能以数字、中划线开头一个便签可以同时有多个类名类名之间以空格隔开类名可以重复一个类选择器可以同时选中多个标签 3、id选择器 3.1、结构 #id属性值 {css属性: 属性值;}3.2、作用 通过id属性值找到页面中带有这个id属性值的标签设置样式 3.3、注意点 所有标签上都有id属性id属性值是唯一的不可以重复的一个标签上只能有一个id属性值一个id选择器只能选择一个标签 4、通配符选择器 4.1、结构

• {css属性名: 属性值; }4.2、作用 找到页面中所有的标签设置样式 4.3、注意点 开发中很少用到只会在很特殊的情况下用到 三、字体和文本样式 1、字体样式 1.1、字体大小 1.1.1、属性名font-size 1.2、字体粗细 1.2.1、属性名font-weight 1.2.2、取值 关键字 正常normal加粗blod 纯数字 正常400加粗700 1.3、字体样式是否倾斜 1.3.1、属性值font-style 1.3.2、取值 正常normal倾斜italic 1.4、字体类型 1.4.1、属性值font-family 1.4.2、常见取值 具体字体1,具体字体2,具体字体3,具体字体4,具体字体5,…,字体系列 具体字体微软雅黑、宋体、楷体等字体系列sans-serif、serif、monospace等… 1.4.3、渲染规则 从左往右按顺序查找如果电脑中未安装该字体则显示下一个字体 如果都不支持此时会更具操作系统显示最后字体系列的默认字体 1.4.4、注意点 如果字体名称中存在多个单词推荐使用引号包裹最后一项字体系列不需要引号包裹网页开发时尽量使用常见自带字体保证不同的用户浏览网页都可以正常显示 注意样式层叠问题 如果给同一个标签设置了相同的属性此时样式会层叠写在最下面的会生效 2、文本样式 2.1、文本缩进 2.1.1、属性名text-index 2.1.2、取值 数字 px 数字 em推荐使用1em 当前标签的font-size的大小 2.2、文本水平对齐方式 2.2.1、属性名text-align 2.2.2、取值 属性值说明left左对齐center居中对齐right右对齐 2.2.3、注意点 如果想文本居中对齐text-align属性给文本所在标签文本的父元素设置 3、文本修饰 3.1、属性值text-decoration 3.2、取值 属性值效果underline下划线常用line-through删除线不常用overline上划线几乎不用none无装饰线 3.3、注意点 开发中会使用text-decoration: none;来给a标签清楚默认下划线 3、line-height行高 3.1、作用 控制一行的上下行距 3.2、属性名line-height 3.3、取值 数字 px倍数当前标签font-size的倍数 3.4、应用 让单行文本垂直居中可以设置line-height文字父元素高度 网页精准布局时会使用line-height1可以取消上下间距 四、选择器进阶 1、后代选择器空格 1.1、作用 根据HTML标签的嵌套关系选择父元素后代中满足条件的元素 1.2、语法 选择器1 选择器2 {css}1.3、结果 在选择器1所找到的后代中找到满足选择器2的标签设置样式 1.4、注意点 后代选择器中选择器与选择器之间以空格隔开子代包含儿子、孙子…所有后代 2、子代选择器 2.1、作用 根据HTML标签的嵌套关系选择父元素子代中满足条件的元素 2.2、语法 选择器1 选择器2 {css}2.3、结果 在选择器1中找到标签的儿子中找到满足选择器2的标签 设置样式 2.4、注意点 子代只包括儿子子代选择器中选择器与选择器之间用隔开 3、并集选择器, 3,1、作用 同时选择多组标签设置相同样式 3.2、语法 选择器1, 选择器2 {css}3.3、结果 找到选择器1和选择器2选中的标签设置样式 3.4、注意点 并集选择器中的每组选择器之间通过逗号分隔并集选择器中的每组选择器可以是基础选择器或者是复合选择器并集选择器中的每组选择器通常一行写一个提高代码的可读性 4、交集选择器 4.1、作用 选中页面中同时满足多个选择器的标签 4.2、语法 选择器1选择器2{css}4.3、结果 找到页面中既能被选择器1选中该的标签又能被选择器2选中的标签设置样式 4.4、注意点 交集选择器之间的选择器之间是紧挨着的没有东西分隔交集选择器如果有标签选择器标签选择器必须写在最前面 5、hover伪类选择器 5.1、作用 选中鼠标悬停在元素上的状态设置样式 5.2、语法 选择器:hover{css}5.3、注意点 任何一个标签都可以添加伪类 五、背景相关属性 1、背景颜色 1.1、属性名background-color 1.2、属性值 颜色取值关键字、rgb表示法、rgba表示法、十六进制… 1.3、注意点 背景颜色默认是透明rgba(0,0,0,0), transprent背景颜色不会印象盒子大小并且还能看清盒子的大小和位置一般在布局中会习惯先给盒子设置背景颜色 2、背景图片 2.1、属性名background-image 2.2、属性值background-image: url(‘图片路径’); 2.3、注意点 背景图片中url可以省略引号背景图片默认是水平和垂直方向平铺的背景图片仅仅是指给盒子起到装饰效果类似背景颜色是不能撑开盒子的 3、背景平铺 3.1、属性名background-repeat 3.2、属性值 取值效果repeat默认值水平和垂直方向都平铺no-repeat不平铺repeat-x沿着水平方向平铺repeat-y沿着垂直方向平铺 4、背景位置 4.1、属性名background-position 4.2、属性值background-position: 水平方向位置 垂直方向位置; 4.2.1、方位名词最多只能表示九个位置 水平方向left、center、right垂直方向top、center、bottom 4.2.2、数字 px坐标 坐标系原点(0,0)盒子左上角 x轴水平向右 y轴垂直向下 4.3、注意点 方位名词取值和坐标取值可以混用第一个取值表示水平第二个取值表示垂直 六、元素显示模式 1、块级元素 1.1、显示特点 独占一行宽度默认是父元素的宽度高度默认由内容撑开可以设置宽高 1.2、代表标签 div、p、h系列、ul、li、dl、dt、dd、form、header… 补充若想去掉列表符号可以使用 list-style: none;2、行内元素 2.1、显示特点 一行可以显示多个宽度和高度默认由内容撑开不可以设置宽高 2.2、代表标签 a、span、b、u、i、s、strong、ins、em、del… 3、行内块元素 3.1、显示特点 一行可以显示多个可以设置宽高 3.2、代表标签 input、textarea、button、select… 4、元素显示模式转换 4.1、目的 属性效果使用频率display: block转换成块级元素较多display: inline-block转换成行内块元素较多display: inline转换成行内元素极少 七、CSS特性 1、继承性 1.1、特点 子元素有默认继承父元素的特点可以继承的常见属性文字控制属性都可以继承 colorfont-style、font-weight、font-size、font-familytext-indent、text-alignline-height… 2、层叠性 1.1、特性 给同一个标签设置不同的样式此时样式会层叠叠加会共同作用在标签上给同一个标签设置相同的样式此时样式会层叠覆盖最终写在最后的样式会生效 1.2、注意点 当样式冲突时只有当选择器优先级相同时才能通过层叠判断效果 3、优先级 3.1、特性 不同的选择器有不同的优先级优先级高的选择器会覆盖优先级低的选择器样式 3.2、优先级公式 继承通配符选择器标签选择器类选择器id选择器行内样式!important 3,3、注意点 !important写在属性值后面分号前面!important不能提升继承的优先级只要是继承优先级最低实际开发中不建议使用!important 3.4、权重叠加计算 3.4.1、场景 如果是复合选择器此时需要通过权重叠加计算方法判断最终那个选择器优先级最高会生效 3.4.2、权重叠加计算 第一级行内样式个数 第二级id选择器个数 第三级类选择器个数 第四级标签选择器个数 3.4.3、比较规则 先比较第一级数据如果比较出来之后的统统不看如果第一级数据相同此时去比较第二级数据如果比较出来之后的就不用看了…如果最终所用的数字都相同表示优先级相同则比较层叠行谁在下面谁生效 八、盒子模型 1、介绍 1.1、概念 页面中的每一个标签都可以看成是一个盒子通过盒子的视角更方便进行布局 浏览器在渲染网页时会将网页中的元素看成是一个个的矩形区域我们也形象的称之为盒子 1.2、盒子模型 CSS中规定每个盒子由内容区域content、内边距区域padding、边框区域border、外边距区域margin构成这就是盒子模型。 2、内容的宽度和高度 2.1、作用 利用width和height属性默认设置盒子内容区域的大小 2.2、属性width/height 2.3、常见取值数字 px 3、边框 3.1、属性名border 3.2、属性值 单个取值的连写取值之间可以空格分开 例如 border: 10px solid orange;solid实线dashed虚线dotted点线 3.3、单方向设置边框 3.3.1、场景 只给盒子某个方向设置边框 3.3.2、border-方位名词 4、内边距 4.1、属性名padding padding属性可以当作复合属性使用表示单独设置某个方向的内边距padding最多取4个值 四值上、下、左、右 三值上、左右、下 两值上下、左右 注内边距默认会撑大盒子如果不想它把盒子撑大我们可以加上css3特性 box-sizing: border-box;5、外边距 5.1、属性名margin 与padding一样的设置 若想让盒子居中可以这样写 margin:0 auto;5.2、外边距折叠现象 5.2.1、合并现象 场景 垂直布局的块级元素上下的margin会合并最终两者距离为margin的最大值。 解决方法 只给其中一个盒子设置margin就可以啦 5.2.2、塌陷现象 场景 互相嵌套的块级元素子元素margin-top会作用在父元素上最终导致父元素一起往下移动 解决方法 给父元素设置border-top或者padding-top分隔父子元素的margin-top给父元素设置overflow: hidden转换成行内块元素设置浮动 九、CSS浮动 1、结构伪类选择器 1.1、作用与优势 作用根据元素在HTML中的结构关系查找元素 优势减少对于HTML中类的依赖有利于保持代码整洁 场景常用于查找某父级选择器中的子元素 1.2、选择器 选择器说明E: first-child { }匹配父元素中的第一个子元素并且是E元素E: last-child { }匹配父元素中最后一个子元素并且是E元素E: nth-child(n) { }匹配父元素中第n个子元素并且是E元素E: nth-last-child(n) { }匹配父元素中倒数第几个子元素并且是E元素 其中n的取值可以是 功能公式偶数2n、even计数2n 1、2n - 1、odd找到前5个-n 5找到从第5个开始n 5 2、伪元素 2.1、概念 伪元素一般页面中的非主体内容可以使用伪元素 2.2、区别 元素HTML设置的标签伪元素由CSS模拟出来的标签 2.3、种类 伪元素作用::before在父元素内容的最前面添加一个伪元素::after在父元素内容的最后一个添加一个伪元素 2.4、注意点 必须设置content属性才能生效 伪元素默认是行内元素 3、浮动float 3.1、作用 网页布局、文字环绕 3.1、特点 浮动元素会脱离标准流在标准流中不占位置浮动元素比标准流高半个级别可以覆盖标准流中的元素下一个浮动元素会在上一个浮动元素的左右浮动排列浮动元素有特殊的显示效果 一行可以显示多个可以设置宽高
  注意浮动元素不能通过text-align: center或者是margin: 0 auto来实现居中 4、清楚浮动 4.1、含义 清除浮动带来的影响如果子元素浮动了此时子元素不能撑开标准流的块级父元素 4.2、原因 子元素浮动脱标不占位置 4.3、目的 需要父元素有高度从而不影响其他网页的布局 4.4、方法 4.4.1、直接设置父元素高度 特点 优点简单方便 缺点有些布局中不能固定父元素高度 4.4.2、额外标签法 操作 在父元素内容的最后添加一个块级元素给添加的块级元素设置clear:both 特点 缺点会在页面中添加额外的标签会让页面的HTML结构变得复杂 4.4.3、单伪元素消除法 操作 用伪元素代替了额外标签 基本写法 .clearfix::after {content: ;display: block;clear: both; }补充写法 .clearfix::after {content: ;display: block;clear: both;/在网页中看不到伪元素/height: 0;visibility: hidden; }特点 优点项目中使用直接给标签加类即可清除 4.4.4、双伪元素清除法 操作 .clearfix::before, .clearfix::after {content: ;display: table; } .clearfix::after {clear: both; }特点 优点项目中使用直接给标签加类即可清除 4.4.5、给父元素设置overflow:hidden 操作 直接给父元素设置 overflow:hidden 特点 优点方便快捷 十、CSS定位装饰 1、定位 1.1、网页常见布局方式 1.1.1、标准流 块级元素独占一行垂直布局行内元素/行内块元素一行显示多个水平布局 1.1.2、浮动 可以让原来垂直布局的块级元素变成水平布局 1.1.3、定位 可以让元素自由的摆放在网页的任意位置一般用于盒子之间的层叠情况 2、使用定位步骤 2.1、设置定位方式 属性值position 常见属性值 定位方式属性值静态定位static相对定位relative绝对定位absolute固定定位fixed 2.2、设置偏移值 偏移值设置分为两个方向水平和垂直方向各选一个使用即可 选择的原则一般是就近原则离哪边近用哪个 方向属性名属性值含义水平left数字px距离左边的距离水平right数字px距离右边的距离垂直top数字px距离上边的距离垂直bottom数字px距离下边的距离 2.3、相对定位 2.3.1、相对于自己之前的位置进行移动 2.3.2、代码 position:relative2.3.3、特点 需要配合方位属性实现移动相对于自己原来位置进行移动在页面中占位置没有脱标 2.3.4、应用场景 配合绝对定位组合使用用于小范围移动 2.4、绝对定位 2.4.1、介绍 相对于非静态的父元素进行定位移动 2.4.2、代码 position: absolute;2.4.3、特点 需要配合方位属性进行移动默认相对于浏览器可视区域进行移动在页面中不占位置已经托标 2.5、固定定位 2.5.1、介绍 相对于浏览器进行定位移动 2.5.2、代码 position: fixed;2.5.3、特点 需要配合方位属性进行移动相对于浏览器可视区域进行移动在页面中不占位置已经脱标 十一、装饰 1、光标类型 1.1、场景 设置鼠标光标在元素上时显示的样式 1.2、属性名cursor 1.3、常见属性值 属性值效果default默认值通常是箭头pointer小手效果提示用户可以点击text工字形提示用户可以选择文字move十字光标提示用户可以移动 2、边框圆角 2.1、场景 让盒子四个交变得圆润增加页面细节提升用户体验 2.2、属性名border-radius 2.3、常见取值 数字 px 百分比 3、overflow 3.1、溢出部分 指的是盒子内容部分所超出盒子范围的区域 3.2、场景 控制内容溢出部分的效果显示 3.3、属性名overflow 3.4、常见属性值 属性值效果visible默认值溢出部分可见hidden溢出部分隐藏scroll无论是否溢出都显示滚动条auto根据是否溢出自动显示或者隐藏滚动条 4、元素本身隐藏 4.1、场景 让某元素在屏幕中不可见 4.2、常见属性 visibility: hidden占位隐藏 display: none不占位的隐藏 5、元素的整体透明 5.1、场景 让某元素整体包括内容一起变透明 5.2、属性名opacity 5.3、属性值 0~1之间的数字1表示完全不透明0表示完全透明