高端网站设计价格,wordpress登录下载附件,发软文提高网站权重,做购物商城网站1.网页分为三个部分#xff1a;
结构#xff1a;HTML
表现#xff1a;CSS
行为JavaScript
CSS:层叠样式表#xff0c;网页实际上是一个多层结构#xff0c;通过CSS可以分别为网页的每一个层来设置样式#xff0c;最终用户只看最上面的一层#xff0c;总之#xff0…1.网页分为三个部分
结构HTML
表现CSS
行为JavaScript
CSS:层叠样式表网页实际上是一个多层结构通过CSS可以分别为网页的每一个层来设置样式最终用户只看最上面的一层总之CSS用来设置网页中元素的样式
2.使用CSS修改元素的样式
1在标签内部通过style属性设置元素的样式(内联样式只能对一个标签生效一般不用)
p stylecolor: red;font-size: 60px; style /p 2将样式编写到head的style标签中(内部样式表可以同时为多个标签设置样式修改时只用修改次此处即可)但只能对一个页面起作用
例使所有p标签都为绿色 headstylep { color: green; }/style
/head
3对多个网页起作用外部样式表
将CSS样式编写到一个外部CSS文件中,使样式在不同页面复用。还可以使用浏览器的缓存机制从而加快网页的加载速度提高用户体验
即创建style.css文件 p { color: green; }
通过link标签引入外部CSS文件
link relstylesheet href./style.css
3.CSS的基本语法
在style标签中不属于html所以要用CSS的标准写
headstyle/*CSS注释*//*CSS基本语法选择器 声明块选择器通过选择器可以选中页面中指定元素例h1:选中页面所有h1元素声明块通过声明块来指定要为元素设置的格式例:color: blue;最后一个;可以省略*/h1 {color: blue;}/style
/headbodyh1 111 /h1
/body 4.CSS的常用选择器
(1)元素选择器
headstyle/*元素选择器作用根据标签名选中指定的元素语法标签名{}例子p{} h1{} div{}*/p {color: blue;}/style
/headbodyh1 111 /h1p p1 /pp p2 /p
/body 2id选择器设置id时保证唯一性
headstyle/*若将第二行的p单独设置为红色则使用id选择器作用根据元素的id属性选中一个元素语法#id{}例子#12{color:red}*/#abc {color: red}/style
/headbodyh1 111 /h1p p1 /pp idabc p2 /p
/body 3class标签多个class用空格隔开
headstyle/*类选择器class是一个标签的属性他和id相似不同的是class可以重复使用作用根据元素的class属性值选中一组元素语法.class{}*/.abc {color: red}.bc {font-size: 50px;}/style
/headbodyh1 111 /h1p p1 /pp classabc bc p2 /pp classabc p3 /p
/body 4通配选择器
headstyle/*通配选择器作用选中页面中的所有元素语法**/*{color: red}/style
/head
bodyh1 111 /h1p p1 /p
/body 5.复合选择器
1交集选择器 .
headstyle/*将class为red的div字体大小设置为30px使用交集选择器作用选中同时复合多个条件的元素语法选择器1.选择器2{}注意若有元素选择器则用元素选择器开头*/div.red {font-size: 30px;}/style
/headbodydiv classred div /divp classred p /p
/body 2并集选择器
headstyle/*同时选中h1和span设置为绿色使用并集选择器作用同时选择多个选择器对应的元素语法选择器1,选择器2{}注意若有元素选择器则用元素选择器开头*/h1,span {color: green;}/style
/headbodyh1 classred div /h1span classred p /span
/body 6.关系选择器
bodydiv我是divp我是div中的pspan我是div-p-span/span/pspan我是div-span/span/div
/body
1子元素选择器
headstyle/*为div的子元素span(不是p里的span)设置一个字体颜色红色子元素选择器作用选中指定父元素的指定子元素*/div span {color: red;}/style
/head 2后代元素选择器 /*后代元素选择器*/div span {color: red;}
3兄弟元素选择器 /*兄弟元素选择器都是选择后面的选择下一个兄弟语法当前下一个要修改的选择下面所有兄弟语法兄~弟要修改的*/p span {color: red;}p ~ span {color: red;}
7.属性选择器
bodyp titlea 1/pp titleab 2/pp titlec 2/pp 3/p
/body /*属性选择器1[属性名]让p标签中有title的颜色变为红色不关注title里的具体值选择含有指定属性的元素 */p[title] {color: red;} /*属性选择器2[属性名属性值]让p标签中titleb的颜色变为红色选择含有指定属性和属性值的元素*/p[titlea] {color: red;} /*属性选择器3/4/5[属性名^属性值]选择以属性值开头的元素例选择以a开头的元素[属性名属性值]选择以属性值结尾的元素[属性名*属性值]选择属性值中含有某元素的元素*/p[title^a] {color: red;} 8.伪类选择器
headstyle/*将ul里的第一个li设置为红色*/ul li.first {color: red;}/style
/headbody!--ul5*li--ulli classfirst第1个/lili第2个/lili第3个/lili第4个/lili第5个/li/ul
/body 这个将第一个li设置为红色若添加li在此前面则新的第一个li不为红色
解决方法使用伪类选择器
headstyle/*将ul里的第一个li设置为红色*//*使用伪类用来描述一个元素的特殊状态比如第一个元素/被点击的元素伪类一般情况下用开头*//*:first-child:冒号前面元素的第一个子元素总可以确保第一个为红色*/ulli:first-child {color: red;}/*:last-child:冒号前面元素的最后一个子元素总可以确保最后一个为绿色*/ulli:last-child {color: green;}/*:nth-child(n):冒号前面元素的第n个子元素总可以确保第n个为蓝色若()写n:全选n取0~正无穷若()写2n/even:选中偶数位的元素若()写2n1/odd:选中偶数位的元素*/ulli:nth-child(3) {color: blue;}/*这些伪类是根据所有子元素进行排序即若最前面加span则都不生效 要用ulspan:first-child选第一个*//*:first-of-type :last-of-type :nth-last-of-type()功能与上述相同找相同类型的第?个即使用:first-of-type可以在span加入的情况下对第一个li进行改变*//style
/headbody!--ul5*li--ulli第1个/lili第2个/lili第3个/lili第4个/lili第5个/li/ul
/body headstyle/*:not()否定伪类将符合条件的元素从选择其中去除*/ulli:not(li:nth-child(2)) {color: aqua;}/style
/head 10.超链接的伪类
headstyle/*一般不用*//*link和visited只适用于a*//*:link:表示没访问过的链接*/a:link {color: red;}/*:visited:表示访问过的链接只能改颜色*/a:visited {color: green;}/style
/head
!--通过伪类区分1.没访问过的链接2.访问过的链接
--bodya hrefhttps://www.baidu.com/ 访问过的链接/abrbra hrefhttps://www.baidu.com/ 没访问过的链接/a
/body
表示鼠标移入的状态a:hover 表示鼠标点击的状态a:active这两个所有元素都可以用
headstyle/*表示鼠标移入的状态a:hover*/a:hover {color: red;}/*表示鼠标点击的状态a:active*/a:active {font-size: 30px;color: green;}/style
/head
!--通过伪类区分1.没访问过的链接2.访问过的链接
--bodya hrefhttps://www.baidu.com/ 链接1/abrbra hrefhttps://www.baidu.com/ 链接2/a
/body 11.伪元素选择器
headstyle/*伪元素表示页面中一些特殊的元素如首字母::first-letter:第一个字母::first-line:第一行::selection:鼠标选中的内容*/p::first-letter {font-size: 50px;}p::first-line {background-color: yellow;}p::selection {color: green;}/style
/headbody!--首字母下沉--pLorem ipsum dolor, sit amet consectetur adipisicing elit. Minima obcaecati iusto, illum sapiente consequatur hicharum exercitationem perspiciatis deleniti? Autem ducimus qui recusandae impedit voluptatum voluptate quibusdamesse dignissimos pariatur./p
/body headstyle/*伪元素表示页面中一些特殊的元素如首字母::before 元素起始位置 在和h之间::after 元素最后位置 在u和之间before和after必须结合content使用(添加内容)*/div::before{content: abc;color: red;}div::after{content: hhhhh;color: green;}/style
/headbodydivhello hello how are you/div
/body 12.样式的继承
headstyle/*样式的继承我们为一个元素设置的样式同时也会应用到它的后代上并不是所有的样式都会被继承比如背景、布局相关的不会被继承*/p{color: red;}/style
/head
!--span元素继承了父亲p的style--
bodyp我是一个p元素span我是p元素中的span元素/span/p
/body 13.选择器的权重
headstylediv {color: yellow;}.red {color: red;}/style
/head
!--样式的冲突当我们通过不同的选择器选中相同的元素并为相同的样式设置不同的值发生样式冲突时应用哪个样式由选择器的权重优先级决定选择器的权重从高到低内联样式id选择器类和伪类选择器元素选择器若优先级相同则优先使用下面的样式可以在某样式后面加!inportant则此样式为最高优先级
--bodydiv idbox1 classred我是div/div
/body14.像素和百分比
headstyle.box1 {/*长度单位像素 px百分比*/width: 200px;height: 200px;background-color: orange;}.box2 {/*百分比:将属性设置为相对于其父元素属性的百分比使用百分比可以使子元素跟随父元素的改变而改变*/width: 50%;height: 70%;background-color: green;}/style
/head
bodydiv classbox111 div classbox222/div/div
/body headstylehtml{font-size: 50px;}.box1 {/*em:相对于元素的字体大小来计算的1em1font-sizeem会根据字体大小的改变而改变*/font-size: 20px;width: 10em;height: 10em;background-color: red;}.box2 {/*rem:相对于根元素html的字体大小来计算的1em1font-sizeem会根据字体大小的改变而改变*/font-size: 50px;width: 10em;height: 10em;background-color: blue;}/style
/headbodydiv classbox111 div classbox222/div/div
/body15.RGB/RGBA值
使用颜色名比如red,yellow等
使用RGB值0~2550%~100%之间
使用RGBAA代表不透明度用.n表示1表示完全不透明0表示完全透明
使用十六进制的RGB值#红色绿色蓝色如果两位重复可以简写例#ffffff可以简写为#fff
16.HSL/HSLA值
H:色相 0-360
S:饱和度 颜色的浓度0-100
L:亮度 0-100
