表Cascading

Sheets层叠样式表CSS与HTML的结合方式CSS选择器CSS基本属性CSS伪类DIVCSS轮廓CSS边框盒子模型CSS定位

Web之HTML笔记

用于控制设置网页的样式并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。

格式和结构分离有利于格式的重用以及网页的修改与维护。

精确控制页面布局对网页实现更加精确的控制如网页的布局字体颜色背景等。

实现多个网页同时更新。

方式一内联/行内样式

优点可以通过多个标签进行统一的样式设置缺点只能在本页面上进行修饰

选择器

它可以对页面上相同的标签进行统一的设置它描述的就是标签的名称。

stylediv

/stylebodydiv聚沙成塔滴水穿石。

/divdiv千里之行始于足下。

/div

/body类选择器

no-repeat仅显示一次background-position

设置背景图像的起始位置background-attachment

背景图像固定或随着页面滚动

可取值为fixed背景图像固定并不会随着页面的其余部分滚动常用于实现称为水印的图像

!DOCTYPE

charsetUTF-8titleDocument/titlestyle

typetext/cssp{background-color:

red;font-size:

隶书;}body{/*background-color:yellow;background-image:

url(image/wudaojiaoshi.jpg);background-repeat:

no-repeat;background-attachment:

20px

ustify:两端对齐(应用在多行文本中单行文本不生效)文字修饰text-decoration

none

overline文本设置阴影text-shadow首行文本缩进text-indent

valuenem,

用于已有元素处于某种状态时滑动、点击等为其添加对应的样式这个状态是根据用户行为而动态变化的。

动态伪类作用:link链接没有被访问前的样式效果:visited链接被访问后的样式效果:hover鼠标悬停在元素上面时的样式效果:active点击元素时的样式效果即按下鼠标左键时发生的样式:focus用于元素成为焦点时的样式效果常用与表单元素

a:link{color:red;

}结构伪类作用:first-child选择某个元素的第一个子元素:last-child选择某个元素的最后一个子元素:nth-child()选择某个当前元素的兄弟节点下的一个或多个特定的子元素:nth-last-child()选择某个当前元素的兄弟节点的一个或多个特定的子元素从后往前数:first-of-type选择一个父级元素下第一个同类型子元素

伪元素选择器作用::selection选择指定元素中被用户选中的内容::before可以在内容之前插入新内容::after可以在内容之后插入新内容::first-line选择指定选择器的首行::first-letter选择文本的第一个字符

p::before{content:

p::first-line{background-color:

yellow;

DIV是层叠样式表中的定位技术全称DIVision有时把div称为图层更多时候称为“块”。

DIV溢出处理效果

超出div宽度高度的文字或图片进行隐藏处理超出div宽度高度的文字或图片增加滚动条

overflow属性描述visible默认值。

内容不会被修剪会呈现在元素框之外。

hidden内容会被修剪并且其余内容是不可见的。

scroll内容会被修剪但是浏览器会显示滚动条以便查看其余的内容。

auto如果内容被修剪则浏览器会显示滚动条以便查看其余的内容。

inherit规定应该从父元素继承

overflow

CSS轮廓是用于在元素周围绘制线条的属性位于边框边缘的外围可以起到突出元素的作用。

轮廓的样式、颜色和宽度可以通过CSS

outline属性进行规定轮廓是绘制于元素周围的一条线位于边框边缘的外围可起到突出元素的作用。

轮廓属性说明outline-color设置轮廓的颜色outline-style设置轮廓的样式

solid实线、dotted点线、dashed虚线、double双线、groove凹槽、ridge垄脊、inset内嵌、outset外凸或

none无轮廓outline-width设置轮廓的宽度outline-offset设置轮廓与元素边框之间的距离

像素值或正值百分比

border属性说明border-width指定边框的宽度border-style指定边框的样式border-color指定边框的颜色

yellow;width:

150px;top:150px;left:150px;position:

absolute;overflow:

}#div2{top:150px;left:350px;position:

solid;*/

}input{border:none;border-bottom:

solid;outline:

内容区域content、内边距区域padding、边框区域border、外边距区域margin

div{width:

上排列都是在同一行的a标签、label、img、span等块级元素块级元素在默认情况下会独占一行div

、h标签、li、table等

position属性用于指定一个元素在文档中的定位方式定位分为静态定位相对定位绝对定位固定定位、粘性定位这五种其中top、right、bottom、left和z-index属性则决定了该元素的最终位置。