辽宁市场网站建设销售,搭建网站要什么显卡,有经验的企业网站建设,濮阳做网站公司适合初学者开始
一.css3概述
1.什么是css
cascading style sheets 层叠 样式 表
2.作用
html#xff1a;搭建网页的结构#xff0c;承载页面的数据
css:美化页面#xff0c;修饰标签(亚洲4大邪术)
3.css和html属性的使用原则 html的属性只对…适合初学者开始
一.css3概述
1.什么是css
cascading style sheets 层叠 样式 表
2.作用
html搭建网页的结构承载页面的数据
css:美化页面修饰标签(亚洲4大邪术)
3.css和html属性的使用原则 html的属性只对当前标签有效没有可重用性导致没有可维护性 css 具备一定的代码重用性提高了可维护性 但是css没有把重用性做到极致。使用scss可以做到极致 W3C建议使用css替代html属性 如果css无法替代的属性就使用html属性就可以了
二.css的语法规范
1.css的使用方式 样式声明 每个样式属性之间用分号连接 样式属性值 color:red; 字体颜色 background-color:yellow; 背景颜色 font-size: 50px; 字号大小 ①内联样式样式定义在单个的HTML元素中 在单元素中写style属性在style属性中编写样式 元素 style样式声明;样式声明...../元素 p stylecolor:red;background-color:yellow;font-size: 50px; 只对当前元素生效代码不能重用 内联样式默认优先级最高 内联样式只在学习和测试中使用项目基本不用 ②内部样式在页面的内部头元素中写 在head标签中编写style标签在style标签内部编写属性 选择器{样式声明;样式声明.....} 选择器定义页面中使用这个样式的元素条件 p{ color:purple; background-color: pink; } 只能在当前页面中使用项目中使用较少一般是在整体样式写完在内部样式查缺补漏 学习和测试使用较多
③外部样式将样式定义在一个外部文件中 创建一个.css文件在html中的head标签里使用link引入 link relstylesheet hrefmy.css/ 必须有relstylesheet代表当前文件和引入文件的关系 项目中大量使用 2.css的样式特性
①继承性 我们只关注文本样式的继承 后代元素可以使用父元素的文本样式 文本样式和字体样式的继承 绝大多数文本字体样式可以被继承 a标签不会继承字体颜色
②堆叠性 为一个标签定义多个样式规则 如果样式属性不冲突都会作用到这个标签上
③如果冲突要判断优先级 默认优先级 高 内联样式 中 内部样式外部样式-------就近原则代码执行顺序 低 浏览器默认样式 f12关于优先级的显示 默认情况下浏览器中f12中 样式是按照默认优先级顺序从高往低显示
④调整优先级 !important设置最高优先级比内联都高 写在某一个值与分号之间!important与值之间有空格 color: red !important; 注意内联样式不允许设置!important语义要求 三.基础选择器 选择器规范了页面中哪些元素能够使用当前设置的样式 就是一个条件符合这个条件的元素都可以使用这个样式 1.通用选择器 页面中所有元素都可以使用这个样式但是*的效率非常低项目中少用 *{样式声明} *{margin:0padding:0}所有元素内外边距都清零因为不同浏览器给元素默认样式中内边距有可能不同 所以开发前要把样式进行统一叫css reset
2.元素选择器/标签选择器 设置页面中对应元素的默认样式 标签关键字{样式声明;} div{} p{}
3.ID选择器 id在一个页面中不能重复所有id选择器只被一个元素应用 元素 idid值 #id值{样式声明} style标签中每个选择器{}后不要写分号 练习 03_ex.html 一个p#p1标签内容假文 使用id选择器设置 文本颜色red,背景颜色yellow 使用元素选择器设置 文本颜色blue字号大小40px 使用通用选择器设置 文本颜色orange 背景颜色pink字号大小100px 选择器权值的问题
4.类选择 使用.定义样式哪个元素想用用class都能调用 ----------------------------------- . 类名{样式声明} ---------------------------------- 类选择器的其它用法 1.多类选择器 元素 class类名1 类名2 类名3....... 2.分类选择器更精准匹配到目标元素 . 类名1.类名2样式声明 匹配到的是同时引用了类1和类2的元素 元素选择器.类选择器{样式声明} .类选择器.类选择器{样式声明} .tooltip.show{} 3.类名的定义规范 .类名样式声明 必须有 . 不能以数字开头 只能包含字母数字 - 或者_ 不能使用关键字 尽量见名知意
5.群组选择器 选择器1,选择器2,选择器3.....{样式声明} #d1,.c1,div,p.c2{color:red;background-color:yellow} 相当于 选择器1{样式声明} 选择器2{样式声明} 选择器3{样式声明}
6.后代选择器 (空格)通过元素的后代关系来匹配元素 后代关系一级或者多级的嵌套 选择器1 选择器2 选择器3{样式声明}
7.子代选择器 通过元素子代关系来匹配元素 子代关系一层嵌套为子代 选择器1选择器2选择器3{样式声明} 子代和后代选择器可以混合使用 #d1p span{color:red;}
8.伪类选择器 匹配元素在某一个状态时的样式 1只适用于a标签的伪类有2种 ①匹配超连接未被访问时的整体 :link a:link{color:red} ②匹配超链接已被访问时的状态 :visited a:visited{color:green} 2所有元素都能用的伪类 :hover 鼠标悬停的状态 :active 激活状态:鼠标按住不放的瞬间才是Active状态 :focus 元素获取焦点时的状态input buttona:focus{font-size:36px;color:orange} 练习04_ex.html 一个a标签设置以下样式 1.访问后文本颜色orange 2.被激活时文本颜色green 3.鼠标悬停时文本颜色red 4.未被访问时文本pink 当:link :visited:hover:active同时作用在一个a标签上时 需要按照顺序去编写不然会有状态显示不出样式的情况 lv ha 爱恨原则 :link:visited:hover :active 9.选择器权值
选择器权值代表选择器的重要程度
重要程度高优先显示
!import 1000
内联样式 1000
id选择器 100
类选择器 10
伪类选择器 10
元素选择器 1
通用选择器 0 可以参与计算
继承的样式 无 不能
权值的特点
1.当一个选择器中含有多个选择器时需要将所有的选择器权值进行相加 值最大的显示
2.有多个选择器的权值一样大按照就近原则
3.添加了!important当前css样式直接获取最高优先级
4.群组选择器权值不相加个算个的
5.选择器权值的计算不会超过本身选择器权值的最大数量级权重相加时不会进位例如n个类选择器权重相加结果不会超过100 四.尺寸和边框 1.html和css种的尺寸单位 width: height: 取值1.px为单位的数字rem 2.% 但是如果设置高度当前元素的父元素是body%失效 min-width max-width100%,设置给图片 一般设置最大最小宽高width都是相对单位值会改变 min-height max-height ps尺寸的单位 1.px 像素 2.in 英寸 1in2.54cm 3.pt 磅值,用于修饰字号大小 1pt1/72 in 4.cm 厘米 5.mm 毫米 6.em 以父元素设置的尺寸为标准单位2em是父元素的2倍 7.rem 1rem为当前页面html设置的尺寸的1倍 默认情况下html设置的值为16px 面试题 em和rem的区别 em以父元素设置的数值为一个基本单位 rem以html设置的数值为一个基本单位 8.% 父元素的%
2.页面中允许设置尺寸的元素有哪些 具备属性width和height的元素都能设置宽高imgtable,td 块级元素 行内元素 行内块(input/button) 设置尺寸有效 设置尺寸无效 设置尺寸有效 默认宽父元素100% 默认高靠内容撑开 没有内容就是0 宽高靠内容撑开 浏览器默认设置一个宽高 不同浏览器给的宽高不同。 一般要写兼容css reset 3.溢出处理 父元素容器尺寸小内容大会出现溢出效果 默认情况下溢出是纵向溢出 溢出的控制要把css属性写给小尺寸的父元素 (1)overflow: visible; 溢出部分显示默认值 hidden 溢出部分隐藏 scroll 带滚动条不管是否溢出横线都添加x/y轴的滚动条 auto 自动不溢出就没有滚动条溢出自动在溢出方向添加滚动条 overflow-x:scroll 单独让x轴出现滚动条 overflow-y:scroll 单独让y轴出现滚动条 溢出的注意事项 溢出的底层原理特别复杂 ①溢出可以解决很多css的特殊情况---用溢出都不是最优解决方案 ②横向溢出怎么写 PS合法的颜色取值 1.颜色的英文单词 red yellow 2.#开头6个16进制组成一个颜色#ff0000 #00ff00 #0000ff #ffffff #000000 #666666 #00 00 00 ➷ ➷ ➷ red green blue-------rgb 3.当#aabbcc可以简写成#abc #f00 #0f0 #00f #000 #fff #ff0 #0ff #f0f #666 #999 4.rgb(r,g,b)十进制取值 每个颜色的取值范围0~255共256种颜色 rgb(255,0,0)红色 5.rgba(r,g,b,alpha) alpha透明度0~1 rgba(r,g,b,0.2) rgba(r,g,b,.2) 纯透明 rgba(r,g,b,0)transparent
4.边框
①边框的简写形式 同时设置4个方向的边框 border:width style color; width--边框的粗细 style---边框样式 solid 实线 double 双实线 dotted 小圆点虚线 dashed 短线虚线 color---合法颜色transparent 取消边框 border:none/0; 最简方式 borderstyle; border:solid; 边框的其他属性可以不写但是style这一属性必须要有不写显示不出来边框
②单边的设置 边框默认的渲染方式上-----右------下------左 单独设置某一个边框的多个属性 去掉某个边框 border-top: 20px solid #f00; border-right: 20px dotted #00f; border-bottom: 20px dashed #0ff; border-left: 20px double #f0f; border-top: 0; border-right: 0; border-bottom: 0; border-left:0; ③单属性设置 border-width: 100px;----一次设置4个边框的粗细 border-style: solid;-----------一次性设置4个边框的样式 border-color: #CCFF00;------------一次性设置4个边框的颜色
④单边单属性
5.边框的倒角圆角 把直角倒成圆角 border-radius:圆角的半径 取值1.px为单位的数字 2.% 50%就是圆 单角的定义圆角之间会相互影响 单角的设置可以超过50% border-top-right-radius: 100%; border-bottom-right-radius: 100%; border-top-left-radius: 1%; border-bottom-left-radius: 10%; 画一个柠檬或者芒果 单角的简写方式 Border-radius: 左上 右上 右下 左下
6.元素阴影 box-shadow: h-shadow v-shadow blur spread color; h-shadow x轴偏移量 v-shadow y轴偏移量 blur 阴影模糊程度 spread 阴影大小 color 阴影颜色 inset 内部阴影
7.轮廓 多用于修饰文本框和按钮 是边框外部一圈线条不占页面空间 一般默认有一般我们会把轮廓清除掉 设置的方式跟border一样 outline: width style color; 轮廓的粗细 样式 颜色 清除轮廓outline:0; outline:none; 五.盒子模型框模型 所有元素皆为框所有元素在页面上都占据空间这空间默认不许其它元素占据 计算元素在页面上占据空间的公式----盒子模型 默认盒子模型计算公式为 元素实际占地宽度 左外边距左边框左内边距内容区域的宽度右内边距右边框右外边距 元素实际占地高度 上外边距上边框上内边距内容区域的高度下内边距下边框下外边距
1.外边距 margin 外边距边框以外的距离改变外边距元素有位移效果 在浏览器上的body区域内没有颜色但是f12中外边距橘黄色 外边距在页面中是透明的 使用场合改变元素位置改变元素之间的距离
①语法 margin:v1; 同时设置4个方向外边距 margin-top:上外边距 margin-right右外边距 margin-bottom 下外边距 margin-left 左外边距 取值1.px为单位的数字 2.% 上右下左都是父元素宽度的百分比 3.auto 对上下外边距无效 让块级元素本身在父元素内水平居中对行内和行内块元素无效
②简写方式 marginv1; 同时设置4个方向 margin:v1 v2; 上下 左右 margin:0 auto; margin:20px auto; margin:v1 v2 v3; 上 左右 下 margin:v1 v2 v3 v4; 上右下左
③margin自我冲突 元素在页面上渲染的时候默认以左上角开始渲染 想改变元素位置设置左外边距和上外边距 外边距左右冲突以左为准上下冲入以上为准 默认布局的元素不要用右外边距设置元素水平位移左外边距设置位移 右外边距只负责控制当前元素与右侧元素之间的距离
2.外边距的特殊情况 练习 图出不来!!Px没写 03_ex.html 两个div#d1,#d2.宽高200px设置不同背景色要求这两个div之间的距离为50px--------------------使用3种设置方式 Div d1 d2 300*300 150*150 不同背景色d2设置上外边距f12改变这个值观察效果 为两个div设置4个方向外边距观察效果 两个span#s1,#s1.lorem2设置不同背景色 为两个span设置4个方向外边距观察效果 两个input#n1,#n1 为两个input设置4个方向外边距观察效果
①外边距的合并 只有上下两个外边距bottom--top外边距相遇时会合并成一个 值以大的为准 解决方案1.只写一个元素的上外边距或者另一个元素的下外边距 2.页面设计的时候就进行规避掉
②完整的块级元素行内元素行内块的总结 块级元素 行内元素 行内块(input/button) 设置宽高有效 设置宽高无效 设置宽高有效 默认宽父元素100% 默认高靠内容撑开 默认宽高靠内容撑开 浏览器默认设置一个宽高 不同浏览器给的宽高不同。 一般要写兼容css reset 4个方向外边距都有效 上下外边距无效 4个方向外边距都有效 改变行内块上外边距 行内块会带着同一行其它行内元素/行内块一起位移
③默认自带外边距的元素 h1~h6,p,hr,ul,ol body 4个方向自带8px的外边距 ul 上下外边距16px 左内边距40px 通常写项目是提前左css set: *{margin:0;padding:0;}
④外边距溢出 在特殊情况下子元素的上外边距会作用到父元素上边重合的时候给子元素设置上边距的时候父元素会随着子元素一起设置 特殊情况1.父元素没有上边框 2.子元素内容区域的上沿与父元素内容区域的上沿重合 解决方案 1.给父元素上上边框但增加了父元素的实际占地高度 2.给父元素添加上内边距但增加了父元素的实际占地高度 3.给父元素设置overflow:hidden/auto, 如果想溢出显示就不行了 标准解决方案 4.给父元素添加一个大儿子一个空table/table (后期会学习使用css代码生成html元素的写法) 04_ex.html 一个div#parentdiv#child #parent 宽高300px,背景颜色#0ff #child 宽高150px,背景颜色#f00 #child编写上外边距50px 观察效果
3.内边距padding 内边距有颜色颜色为元素背景色 改变内边距视觉上元素变大了但是元素的内容区域并没有改变是改变了内容区域到边框的距离 使用场合1.把元素撑开 2.在某些情况下也可以设置元素间的距离 3.把内容区域位移前提元素没有背景色 padding:v1指定一个值时设置4个方向内边距 padding:v1 v2;只有2个值时第一个值上下 第二个右左 padding:v1 v2 v3; 分别指上 右左 下 padding:v1 v2 v3 v4; 上 右 下 左 padding-top padding-right padding-bottom padding-left 取值①padding没有auto值 ②px为单位 ③% 父元素宽度的百分比 内边距不能设置auto 3.margin padding的使用场景 margin 1.元素位置的微调 2.设置元素与元素之间的距离 4.设置盒子模型的计算方式 box-sizing: ①content-box 默认值设置的width为内容区域宽度 widthcontent 如果项目布局使用的是自适应的布局方式div给出的宽度是百分比的形式例如框占窗口宽度的50%框会随着窗口的变大变而改变但边界和内边距使用像素来表示的怎么办为了避免上述问题可以使用border-box来调整框墨香 ② border-box设置的width widthborderpaddingcontent 设置好padding和border以后内容区域会根据实际的剩余空间进行缩放 当width设置为百分比的时候一般使用border-box比较好控制 未完待续~未完待续~未完待续~未完待续~未完待续~未完待续~
