1. 首页
  2. IT资讯

不知道怎么学习css?simple一个月教你掌握css

“u003Cdivu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fdfic-imagehandleru002Fce694f51-f72a-4933-9c8d-4ac34359c812″ img_width=”1023″ img_height=”682″ alt=”不知道怎么学习css?simple一个月教你掌握css” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E下面是我对css样式总结,可能很多刚接触的伙伴不知道怎么使用,没关系我也给大家准备了一套2019非常适合0基础学习视频资料。 需要的伙伴可以私信我,发送“前端”就可以获取领取地址,免费送给大家。u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003ECSS2.0(Cascading Style Sheet)层叠样式表u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003E 作用:CSS用来修饰网页的(网页表现)u003Cu002Fpu003Eu003Cpu003E w3c规定尽量用css样式替代XHTML的属性u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003Ecss的使用u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003E a.内部样式(写在网页的头部)u003Cu002Fpu003Eu003Cpu003E <style>u003Cu002Fpu003Eu003Cpu003E …….u003Cu002Fpu003Eu003Cpu003E <u002Fstyle>u003Cu002Fpu003Eu003Cpu003E b. 内联样式(写在网页标记中)u003Cu002Fpu003Eu003Cpu003E <标记名称 style=”css代码”u002F>u003Cu002Fpu003Eu003Cpu003E <标记名称 style=”css代码”>…<u002F标记名称>u003Cu002Fpu003Eu003Cpu003E c.外部样式u003Cu002Fpu003Eu003Cpu003E <link type=”textu002Fcss” rel=”stylesheet” href=”css样式URL” media=”all|print|screen|tv”u002F>u003Cu002Fpu003Eu003Cpu003E (1)type :链接页面的文档类型u003Cu002Fpu003Eu003Cpu003E (2)rel:当前文档和目标文档的关系u003Cu002Fpu003Eu003Cpu003E (3)href:css样式目标页面u003Cu002Fpu003Eu003Cpu003E (4)media:根据媒体类型使用不同的css样式u003Cu002Fpu003Eu003Cpu003E all所有|screen计算机屏幕|tv电视|print打印机 u003Cu002Fpu003Eu003Cpu003E 说明: 内联样式优先级最高 ,如果内部样式和外部u003Cu002Fpu003Eu003Cpu003E 样式冲突,后面的覆盖前面的样式u003Cu002Fpu003Eu003Ch1u003E css的语法结构u003Cu002Fh1u003Eu003Cpu003E 选择器{属性:值;属性:值;…} u003Cu002Fpu003Eu003Cpu003E selector{attrbute:value}u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E选择器(selector)u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003E (1)通配选择器 ==== *(自动应用所有标记)u003Cu002Fpu003Eu003Cpu003E (2)标记(类型)选择器 ==== 标记名称(自动应用指定标记)u003Cu002Fpu003Eu003Cpu003E (3)class类选择器=== .class名称u003Cu002Fpu003Eu003Cpu003E (手动应用任意标记中,一个标记中多个class名称用空格隔开)u003Cu002Fpu003Eu003Cpu003E 应用:在标记中 属性 class=”class名称”u003Cu002Fpu003Eu003Cpu003E (4)id选择器 ==== #id名称u003Cu002Fpu003Eu003Cpu003E (手动应用唯一标记中)u003Cu002Fpu003Eu003Cpu003E 应用:在标记中 属性id=”id名称”u003Cu002Fpu003Eu003Cpu003E (5)群组选择器 === 选择器名称,选择器名称…u003Cu002Fpu003Eu003Cpu003E (多个选择器有相同属性的缩写)u003Cu002Fpu003Eu003Cpu003E (6)后代选择器 === 选择器名称 选择器名称u003Cu002Fpu003Eu003Cpu003E (两个选择器至少是父子关系)u003Cu002Fpu003Eu003Cpu003E (7)子代选择器=== 选择器名称>选择器名称u003Cu002Fpu003Eu003Cpu003E (两个选择器必须是父子关系)u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E颜色值u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003E a.单词字符: red红,green绿…u003Cu002Fpu003Eu003Cpu003E b.十六进制: #ff0000 ===#f00 红色u003Cu002Fpu003Eu003Cpu003E c.rgb():rgb:分别是red,green,blueu003Cu002Fpu003Eu003Cpu003E 0-255或百分比u003Cu002Fpu003Eu003Cpu003E 例如:u003Cu002Fpu003Eu003Cpu003E 红色: #f00 rgb(255,0,0) rgb(100%,0%,0%)u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E文本样式u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003E (1)文本颜色 color:颜色值u003Cu002Fpu003Eu003Cpu003E (2)文本大小 font-size:value (单位: 像素px,u003Cu002Fpu003Eu003Cpu003E em:网页默认字体大小的比例 例如:1.5em默认字体的1.5倍)u003Cu002Fpu003Eu003Cpu003E (3)文本加粗 font-weight:normal|bold|值(100-900)u003Cu002Fpu003Eu003Cpu003E (normal==400 bold==700)u003Cu002Fpu003Eu003Cpu003E (4)文本倾斜 font-style:normal|italicu003Cu002Fpu003Eu003Cpu003E (5)文本字体 font-family:宋体,微软雅黑,’Times New Roman’u003Cu002Fpu003Eu003Cpu003E (6) text-decoration:none|underline下划线|u003Cu002Fpu003Eu003Cpu003E overline上划线|line-through删除线u003Cu002Fpu003Eu003Ch1u003E u003Cstrongu003E选择器优先级u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003E 标记选择器 权值 0001u003Cu002Fpu003Eu003Cpu003E class类选择器 权值 0010u003Cu002Fpu003Eu003Cpu003E id 选择器 权值 0100u003Cu002Fpu003Eu003Cpu003E 内联样式 权值 1000u003Cu002Fpu003Eu003Cpu003E 说明:选择器权值越大优先级有高,u003Cu002Fpu003Eu003Cpu003E 样式显示选择器优先级高的u003Cu002Fpu003Eu003Cpu003E 继承的样式优先级最低,u003Cu002Fpu003Eu003Cpu003E 如果权值相同后面的覆盖前面的样式u003Cu002Fpu003Eu003Cpu003E !important 的优先级最大u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E伪类选择器:u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003Eu003Cstrongu003Ea.行为伪类u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E :link:链接未访问状态u003Cu002Fpu003Eu003Cpu003E :visited:链接已访问状态u003Cu002Fpu003Eu003Cpu003E :hover:设置鼠标悬停状态u003Cu002Fpu003Eu003Cpu003E :active:设置鼠标激活状态u003Cu002Fpu003Eu003Cpu003E 说明: LVHA 顺序设置u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E伪元素选择器u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003E :beforeu003Cu002Fpu003Eu003Cpu003E :after u003Cu002Fpu003Eu003Cpu003E 例如:u003Cu002Fpu003Eu003Cpu003E :before{u003Cu002Fpu003Eu003Cpu003E content:”内容”|url(图像URL);u003Cu002Fpu003Eu003Cpu003E } u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E布局样式中盒子属性:u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003E 1.width:宽度u003Cu002Fpu003Eu003Cpu003E 2.height:高度u003Cu002Fpu003Eu003Cpu003E div标记:块元素,宽度是父级百分之百u003Cu002Fpu003Eu003Cpu003E span标记:行元素,宽度是元素的宽度u003Cu002Fpu003Eu003Cpu003E 说明:行元素不能设置宽高,只能给块元素u003Cu002Fpu003Eu003Cpu003E 设置宽高,及有宽高属性的元素设置 img,input等u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003Epadding:内边距(边框和内容的距离)u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003E padding-top:value 上内边距u003Cu002Fpu003Eu003Cpu003E padding-right:value 右内边距u003Cu002Fpu003Eu003Cpu003E padding-bottom:value 下内边距u003Cu002Fpu003Eu003Cpu003E padding-left:value 左内边距u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E margin:外边距(元素边框的外围) u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003E margin-top:上外边距u003Cu002Fpu003Eu003Cpu003E margin-right:右外边距u003Cu002Fpu003Eu003Cpu003E margin-bottom:下外边距u003Cu002Fpu003Eu003Cpu003E margin-left:左外边距u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003Eborder (边框)u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003E border-top-width:上边框宽度u003Cu002Fpu003Eu003Cpu003E border-top-sytle:上边框样式u003Cu002Fpu003Eu003Cpu003E (实线 solid, 虚线 dashed, u003Cu002Fpu003Eu003Cpu003E 点线 dotted,双线 double) u003Cu002Fpu003Eu003Cpu003E border-top-color:上边框颜色u003Cu002Fpu003Eu003Cpu003E border-right-width:右边框宽度u003Cu002Fpu003Eu003Cpu003E border-right-sytle:右边框样式 u003Cu002Fpu003Eu003Cpu003E border-right-color:右边框颜色u003Cu002Fpu003Eu003Cpu003E border-bottom-width:下边框宽度u003Cu002Fpu003Eu003Cpu003E border-bottom-sytle:下边框样式 u003Cu002Fpu003Eu003Cpu003E border-bottom-color:下边框颜色u003Cu002Fpu003Eu003Cpu003E border-left-width:左边框宽度u003Cu002Fpu003Eu003Cpu003E border-left-sytle:左边框样式 u003Cu002Fpu003Eu003Cpu003E border-left-color:左边框颜色u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E盒子的总宽度计算u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003E 总宽度= 左外边距+左边框+左内边界+盒子widthu003Cu002Fpu003Eu003Cpu003E +右内边界+右边框+右外边距u003Cu002Fpu003Eu003Ch1u003E文本样式2u003Cu002Fh1u003Eu003Cpu003E font:font-style 倾斜u003Cu002Fpu003Eu003Cpu003E |font-variant 小号的大写字母u003Cu002Fpu003Eu003Cpu003E |font-weight 加粗u003Cu002Fpu003Eu003Cpu003E |font-size 字大小u003Cu002Fpu003Eu003Cpu003E |line-height 行高u003Cu002Fpu003Eu003Cpu003E |font-family 字体u003Cu002Fpu003Eu003Cpu003E font-style:normal|italicu003Cu002Fpu003Eu003Cpu003E font-variant:normal|small-caps小号的大写字母u003Cu002Fpu003Eu003Cpu003E font-weight:normal|bold|值(100-900)u003Cu002Fpu003Eu003Cpu003E normal==400 bold==700u003Cu002Fpu003Eu003Cpu003E font-size:value (单位: px, em)u003Cu002Fpu003Eu003Cpu003E font-family:宋体,Arial,’Times New Roman’;u003Cu002Fpu003Eu003Cpu003E line-height:value 行高u003Cu002Fpu003Eu003Cpu003E 说明:元素的行高等于盒子的u003Cu002Fpu003Eu003Cpu003E 高度,实现元素的垂直居中u003Cu002Fpu003Eu003Cpu003E text-align:left|center|rightu003Cu002Fpu003Eu003Cpu003E 元素的水平对齐u003Cu002Fpu003Eu003Cpu003E text-decoration:none|underlineu003Cu002Fpu003Eu003Cpu003E |overline|line-throughu003Cu002Fpu003Eu003Cpu003E text-transform:noneu003Cu002Fpu003Eu003Cpu003E |capitalize首字母大写u003Cu002Fpu003Eu003Cpu003E |uppercase 大写字母u003Cu002Fpu003Eu003Cpu003E |lowercase 小写字母u003Cu002Fpu003Eu003Cpu003E text-indent: value (单位 px em)首行缩进u003Cu002Fpu003Eu003Cpu003E 说明:只能对块元素使用 text-indentu003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E浮动(Float)u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003E float:left左浮动u003Cu002Fpu003Eu003Cpu003E |right右浮动u003Cu002Fpu003Eu003Cpu003E |none不浮动u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E清除浮动u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003E clear:both 清除两边浮动u003Cu002Fpu003Eu003Cpu003E |left 清除左浮动u003Cu002Fpu003Eu003Cpu003E |right 清除右浮动 u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E布局显示u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003E (1) display:none|u003Cu002Fpu003Eu003Cpu003E block 块u003Cu002Fpu003Eu003Cpu003E inline 行u003Cu002Fpu003Eu003Cpu003E inline-block 内联块u003Cu002Fpu003Eu003Cpu003E (2) visibility:visble 默认值u003Cu002Fpu003Eu003Cpu003E | hidden 隐藏u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E背景(background)u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003E background-color:value 背影颜色u003Cu002Fpu003Eu003Cpu003E background-repeat:u003Cu002Fpu003Eu003Cpu003E repeat(重复默认值)u003Cu002Fpu003Eu003Cpu003E |repeat-x 水平重复u003Cu002Fpu003Eu003Cpu003E |repeat-y 垂直重复u003Cu002Fpu003Eu003Cpu003E |no-repeat 不重复u003Cu002Fpu003Eu003Cpu003E background-image:url(图片路径)u003Cu002Fpu003Eu003Cpu003E 背影图片u003Cu002Fpu003Eu003Cpu003E background-attachment:scroll(滚动)u003Cu002Fpu003Eu003Cpu003E |fixed(固定) u003Cu002Fpu003Eu003Cpu003E background-position:u003Cu002Fpu003Eu003Cpu003E value(水平位置) value(垂直位置) u003Cu002Fpu003Eu003Ch1u003E布局:u003Cu002Fh1u003Eu003Cpu003E 文档流布局u003Cu002Fpu003Eu003Cpu003E 浮动布局u003Cu002Fpu003Eu003Cpu003E 定位布局u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E定位(Position)u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003E (1)属性值 u003Cu002Fpu003Eu003Cpu003E a. static(默认值):标准文档流u003Cu002Fpu003Eu003Cpu003E b. fixed(固定定位):脱离文档流(不占位),u003Cu002Fpu003Eu003Cpu003E 通过 top,left,rightu003Cu002Fpu003Eu003Cpu003E ,bottom属性定位置u003Cu002Fpu003Eu003Cpu003E c. absolute(绝对定位):脱离文档流(不占位),u003Cu002Fpu003Eu003Cpu003E 通过 top,left,rightu003Cu002Fpu003Eu003Cpu003E ,bottom属性定位置u003Cu002Fpu003Eu003Cpu003E (2) z-index (实现层排序)u003Cu002Fpu003Eu003Cpu003E 说明:z-index属性只能有 fixed,absoluteu003Cu002Fpu003Eu003Cpu003E relative 属性值时使用u003Cu002Fpu003Eu003Cpu003E 可以是正值,负值;默认值是0u003Cu002Fpu003Eu003Cpu003E 值越大定位层越在上面u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E透明度属性u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003E (1) opacity:0~1;u003Cu002Fpu003Eu003Cpu003E (2) filter:alpha(opacity=1~100)u003Cu002Fpu003Eu003Cpu003E (支持的浏览器:IE)u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E一.定位(Position)u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003E (1)属性值u003Cu002Fpu003Eu003Cpu003E static:默认值(标准文档流)u003Cu002Fpu003Eu003Cpu003E fixed(固定定位):脱离文档流(不占位),通过top,leftu003Cu002Fpu003Eu003Cpu003E ,right,bottom属性移动u003Cu002Fpu003Eu003Cpu003E absolute(绝对定位):脱离文档流(不占位),通过top,leftu003Cu002Fpu003Eu003Cpu003E ,right,bottom属性移动u003Cu002Fpu003Eu003Cpu003E 说明:默认坐标在浏览器的左上角,通过左上角坐标来移动u003Cu002Fpu003Eu003Cpu003E fixed 有滚动条时与 absolute有区别u003Cu002Fpu003Eu003Cpu003E relative(相对定位):根据自身文档流定位(保留位置)u003Cu002Fpu003Eu003Cpu003E 说明 :默认坐标自身盒子的左上角u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E透明度u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003E (1) opacity:0~1u003Cu002Fpu003Eu003Cpu003E 说明: chrome(谷歌),firefox(火狐)u003Cu002Fpu003Eu003Cpu003E safari (苹果浏览器),opera(欧朋)u003Cu002Fpu003Eu003Cpu003E (2):filter:alpha(opacity=1~100)u003Cu002Fpu003Eu003Cpu003E 说明: IE支持u003Cu002Fpu003Eu003Cpu003E 总结:u003Cu002Fpu003Eu003Cpu003E 1.css样式链接方法(内部链接,外部链接,内联样式)u003Cu002Fpu003Eu003Cpu003E 2.选择器(u003Cu002Fpu003Eu003Cpu003E 通配符选择器u003Cu002Fpu003Eu003Cpu003E 标记选择器u003Cu002Fpu003Eu003Cpu003E class类型选择器u003Cu002Fpu003Eu003Cpu003E id 选择器u003Cu002Fpu003Eu003Cpu003E 群组选择器u003Cu002Fpu003Eu003Cpu003E 后代选择器u003Cu002Fpu003Eu003Cpu003E 子代选择器u003Cu002Fpu003Eu003Cpu003E )u003Cu002Fpu003Eu003Cpu003E 3.伪类选择器u003Cu002Fpu003Eu003Cpu003E 4.盒子属性(width,height,padding,margin,border,background)u003Cu002Fpu003Eu003Cpu003E 5.全局样式 u003Cu002Fpu003Eu003Cpu003E 6.布局中浮动u003Cu002Fpu003Eu003Cpu003E 7.布局定位u003Cu002Fpu003Eu003Cpu003E 8.hack 兼容 u003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:不知道怎么学习css?simple一个月教你掌握css

主题测试文章,只做测试使用。发布者:℅傍ㄖ免沦陷dε鬼,转转请注明出处:http://www.cxybcw.com/11184.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code