南县做网站推荐,网站开发项目思路,网站开发开发需求文档,用vs2012做网站教程1.高阶选择器:子代后代#xff0c;相邻通用兄弟#xff0c;交集并集#xff0c;属性#xff0c;伪类#xff0c;伪元素子代后代选择器divp{} div p{}相邻通用兄弟divp{} div~p{}理解#xff1a;div同学的同桌p div同学的【同学(有p的)】交集并集选择器div,p di…1.高阶选择器:子代后代相邻通用兄弟交集并集属性伪类伪元素子代后代选择器divp{} div p{}相邻通用兄弟divp{} div~p{}理解div同学的同桌p div同学的【同学(有p的)】交集并集选择器div,p div.div注意:类选择写后面属性选择器[id] [classdiv] [class^*$d]伪类选择器,伪元素选择器(重点讲解)定义:伪类用于向某些选择器添加特殊的效果(添加样式)伪元素用于向某些选择器设置特殊效果。(改变样式)总结区别:伪类本质上是为了弥补常规CSS选择器的不足伪元素本质上是创建了一个 有内容的 虚拟容器css3中:伪类和::伪元素;可以同时使用多个伪类而只能同时使用一个伪元素常用伪类: :not() :focus :link :visited :hover :active :first-child :nth-child():nth-last-child():nth-of-type(n):only-child :only-of-type结构性伪类选择器:root()选择器等同于元素:not()选择器称为否定选择器:empty()选择器表示的就是空。是一点内容都没有哪怕是一个空格:target()选择器 点击a标签#111目标id为111的标签sadadas123:lang()项目需要做国际化并且中英文环境下样式会有不同。a:lang(en){color:red}选中3个以en开头的 phpstudy HTML 511遇见常用伪元素: ::first-letter,::first-line,::before,::after用途1.app:before{content: ;border: 1px #df147f solid;width: 50px;position: absolute;left: 25px;top:-5px;}.app:after{content: ;border: 1px #ff102c solid;width: 50px;position: absolute;left: 25px;bottom:-5px;}用途2 清浮动css3中新加了个 ::selectioncss3中新写法::2.基本样式:长度颜色,字体样式,文本样式,背景样式长度颜色body {background-color: yellowgreen;}div {/*长度单位*//*px in pt mm cm em rem vw vh*/width: 100px;/*width: 720pt; 10in*//*width: 10em; 通常160px 10rem*//*width: 50vw; 50% view width*/height: 100px;/*颜色单位*//*单词 rgb() rgba() #六个十六进制位*/色光三原色红、绿、蓝。/*background-color: cyan;*//*background-color: rgb(255, 0, 0);*//*background-color: rgba(255, 0, 0, 0);*//*满足AABBCC形式可以简写为abc*/background-color: #a0c}字体样式span {/*大小*/font-size: 30mm;/*字重: bold粗 (normal标准 lighter较淡的) 100~900*/font-weight: 900;/*行高: 行高设置大于等于字体大小,字体在行高中垂直居中显示*/line-height: 50mm;/*样式: 一般不关心*/font-style: normal;/*字族:可以自定义字族当Segoe UI Emoji不存在,或不起作用,再选取 微软雅黑 */font-family: Segoe UI Emoji, 微软雅黑;/*css语法: 空格隔开为多个值赋值(加粗,stylesize/hightfamil), ,隔开为一个值多值赋值*/font: lighter 50mm/80mm Segoe UI Emoji, 微软雅黑;}文本样式span {color: red;/*水平居中方式:left center right*/text-align: center;/*字划线: underline line-through overline none*/text-decoration: overline;/*字间距*/letter-spacing: 3px;/*词间距*/word-spacing: 10px;}div {width: 300px;/*显示方式*/display: inline-block;}div {font-size: 12px;/*垂直排列方式: top baseline bottom*/vertical-align: baseline;/*缩进*/text-indent: 2em;}/*遇到连体的英文,html将其解析为一个单词(作为一个整体)*/.div {/*按标签的设定宽度强行换行,可以在单词(整体)内部换行*/word-wrap: break-all;}abcdefabcdefabcdefabcdeabcdefabcdef背景样式div {width: 300px;height: 300px;background-color: red;}div {/*背景图片*/background-image: url(data/bg_repeat.gif);/*平铺: no-repeat repeat-x repeat*/background-repeat: no-repeat;/*定位*//*10px 10px center 设置一个值,第二个值默认为center*//*10px 10px 第一个值控制水平位置,第二个值控制垂直位置*//*background-position: right center;*//*定位相关的涉及到滚动时的效果: scroll fixed*/background-attachment: fixed;}div {/*整体设置*/background: url(data/bg_repeat.gif) 10px 10px no-repeat red;}
