内连框架,css选择器,样式的继承

内联框架可以引入外部页面,不会被搜索引擎检索,可以设置宽高

<iframe src="相对路径" width="100px"></iframe>

<a href="可以写相对路径,也可以写一个完整的地址,也可以先使用‘#’占位">超链接</a>

target="_blank"在一个新页面打开

css:层叠样式表

内联样式只对当前元素有效,不方便复用,不方便维护

内部样式<style type="text/css"></style>写在头标签里

外部样式表使用<link rel="stylesheet" type="text/css" href="css/外部样式表文件名.css"/>

/*  */多行注释

css语法规范:选择器{声名块}一个声明块中可以有多个声明要用‘;’隔开

块元素:div p h1-h6 ul li...独占一行,从上往下排列

内联元素:span a img iframe input...只占自身大小,从左往右排,自动换行

块元素包含内联元素,<a>能包含任意标签,除了它本身 <p>只能包含内联不能包含块

元素选择器:选中页面上所有的指定元素,元素名(例如:div p ul等){属性:值}

id选择器:具有唯一性,不能重复 .类名{属性:值}

类选择器:指定相同类的元素 #id名{属性:值}

并集选择器:通过选择器分组同时选中多个选择器对应的元素通过‘,’连接  #p1,.p2{属性:值}

通配选择器:选中页面上所有的元素 *{属性:值}

复合(交集)选择器:同时满足多个选择器的元素 标签必须满足:既有标签一的特点,也有标签二的特点 div.p1{属性:值}

后代元素选择器:用来选择元素的所有后代 div span{属性:值}

子元素选择器:选中指定父元素中的指定子元素 div > span{属性:值}

p:first(last)-child{属性:值}第一个和最后一个子标签

:nth-child选择指定位置的子元素

:first-of-type :last-of-type  从当前开始

伪类选择器:表示元素特殊的状态

a:link{属性:值}正常连接

a:visited{属性:值}访问过的连接(只能定义字体颜色)

a:hover{属性:值}鼠标滑过的连接

a:active{属性:值}正在点击的连接

-:focus{属性:值}获取焦点

p:before{content:'内容'属性:值}}指定元素前

p:after{content:'内容'属性:值}指定元素后

-::selection{属性:值}选中的元素

伪元素选择器:来表示一些特殊的位置

p:first-letter{属性:值}首字母定义样式

p:first-line{属性:值}首行定义样式

属性选择器:根据元素的属性

p[title或title="值"  ]{属性:值} 

p[title^="值"  ]{属性:值}  以……开头

p[title$="值"  ]{属性:值}以……结尾

p[title*="值"  ]{属性:值}表示包含

兄弟元素选择器:span+p{属性:值}选择紧挨着span后边的兄弟元素 span~p选择span后边所有的p元素

否定伪类: p:not(类名){属性:值} 选择除了某个类之外的所有元素

样式的继承:可以把最基本的样式设置给祖先元素,他所有的后代都会自动继承

背景 边框 定位 都不会被继承

猜你喜欢

转载自blog.csdn.net/weixin_33860553/article/details/90934875
今日推荐