千锋教育培训怎么样,搜索引擎优化有哪些,在线协同办公软件,部门网站建设管理办法欢迎关注个人主页#xff1a;逸狼 创造不易#xff0c;可以点点赞吗 如有错误#xff0c;欢迎指出~ 目录 CSS css的三种引入方式 css书写规范 选择器分类 标签选择器 class选择器 id选择器 复合选择器 通配符选择器 color颜色设置 border边框设置 width/heigth 内/外边距 C… 欢迎关注个人主页逸狼 创造不易可以点点赞吗 如有错误欢迎指出~ 目录 CSS css的三种引入方式 css书写规范 选择器分类 标签选择器 class选择器 id选择器 复合选择器 通配符选择器 color颜色设置 border边框设置 width/heigth 内/外边距 CSS
CSS(Cascading Style Sheet),层叠样式表,⽤于控制⻚⾯的样式.CSS能够对⽹⻚中元素(页面上所有内容,称之为元素)位置的排版进⾏像素级精确控制,实现美化⻚⾯的效果.能够做到⻚⾯的样式和 结构分离. 选择器{⼀条/N条声明}
选择器决定针对谁修改(找谁) 声明决定修改啥.(⼲啥)
声明的属性是键值对.
使⽤;区分键值对,使⽤:区分键和值. style/* 选中所有的p标签 */p{/* 设置字体颜色 */color:red;/* 设置字体大小 */font-size:30px;}/stylephello/pphello1/pphello2/p你好
这里是选中了所有的p标签中的内容对其做了样式修改 CSS要写到style标签中(后⾯还会介绍其他写法)style标签可以放到⻚⾯任意位置.⼀般放到head标签内.(因为HTML文件是从上往下加载,先加载CSS,方便用户使用)CSS使⽤/**/作为注释.(使⽤ctrl/快速切换)
css的三种引入方式 css符合就近原则(元素离最近的css先生效)
内部样式会出现⼤量的代码冗余,不⽅便后期的维护所以不常⽤.⾏内样式,只适合于写简单样式.只针对某个标签⽣效.缺点是不能写太复杂的样式.外部样式html和css实现了完全的分离,企业开发常⽤⽅式.
css书写规范
css 不区分大小写,但是开发时统一使用小写字母冒号后⾯带空格 选择器和{之间也有⼀个空格
选择器分类
CSS选择器的主要功能就是选中⻚⾯指定的标签元素.选中了元素,才可以设置元素的属性.
注意:class可以被多个元素使用,id只能被一个元素使用(class可以重复,id不能重复) 标签选择器
标签名{} 根据标签选择元素
/* 选择所有的a标签, 设置颜⾊为红⾊ */
a {color: red;
}
/* 选择所有的div标签, 设置颜⾊为绿⾊ */
div {color: green;
}class选择器
.类名{} 根据类选择元素 style.red {color: red;}.green {color: green;}/stylep classredhello/pp classgreenhello2/pp classbluehello3/pspan classred我是一个span/spandiv classgreen我是一个div/div id选择器
#id{} 根据id选中元素
/* 选择id为submit的元素, 设置颜⾊为红⾊ */
#submit {color: red;
}复合选择器
标签名.类{} 多个单选择器的组合
空格 表示后代没空格 表示交集逗号 表示并集 表示相邻后代 /* 1.空格表示后代(儿子或孙子都行) 这里表示要满足ul里中找到li,将li设置为红色 */ul li{color:red;}/* 2.没空格 表示交集 这里表示p标签和red类都要满足的设置为 红色*/p.red {color: red;}/* 3.逗号表示并集 这里表示red类和green类字体都设为 40px */.red, .green{font-size: 40px;}/*4. 表示相邻后代只能是父子辈(相隔一代)不能是爷孙辈 */ullia{ /*这里表示ul里的li,li中的a标签生效*/color: brown;} 通配符选择器
通配符{}
/* 设置⻚⾯所有元素, 颜⾊为红⾊*/
* {color: red;
}color颜色设置
颜⾊有如下⼏种表达⽅式:
英⽂单词,如red,bluergb代码的颜⾊,如rgb(255,0,0)⼗六进制的颜⾊如#ff00ff(相同的两个值可以简写为一个,这里可以简写为#f0f)
border边框设置
边框是⼀个复合属性,可以同时设置多个样式,不分前后顺序,浏览器会根据设置的值⾃动判断 .text1{border: 1px solid purple;
}这里表示选择text1标签设置宽度为1像素,样式为实线的紫色边框
border-width宽度设置,取值顺序
一个值 上下左右取值相同两个值 上下 左右 三个值上 左右 下四个值 上 右 下 左(顺时针)
width/heigth
width设置宽度,heigth设置高度
只有块级元素可以设置宽高,块级元素独占一行,行内元素不独占一行
常见块级元素:h1-h6,p,div等
常见行内元素:a span
可以将行内元素改成块级元素
使⽤display属性可以修改元素的显⽰模式.
display: block 改成块级元素[常⽤]display: inline 改成⾏内元素[很少⽤] /* 将span改为 块级元素 */span{display: block;}
内/外边距
内边距和外边距是相对的概念
确定一个边框为参考边框
边框与内容之间的距离是内边距padding边框与边框之间的距离是外边距margin
当两个元素(相邻)设置边距的值不一致时,取较大的值 stylediv {border: 1px solid red;padding: 20px;margin: 40px;}/style /* 以整个页面的边框为参考边框 ,内边距为100px*/html{padding:100px}
