HTML学习笔记(CSS)NO.3
css指层叠样式表 css样式表极大地提高了工作效率 属性选择器 selector{ property:value; } 如h1{ color:red; front-size:14px; } 选择器分组 如 h1,h2,h3{ color:red; } 将h1,h2,h3的标签属性设置成相同的属性 继承: 如 body{ color:red; } 派生选择器:通过依据元素在其位置的上下文关系来定义样式 id选择器:可以为有id的HTML元素指定特定的样式,以#来定义 目前比较常用的方式是id选择器常常用于建立派生选择器 如 #在html中通过id属性来定义的标签{ 属性:值; } #在html中通过id属性来定义的标签 内部嵌套的子标签名称{ 属性: 值; } 类选择器:类选择器以一个点显示 class也可以作为派生选择器 如 首先在表现中以class关键字指定其class名称 然后在CSS中使用如下方式: .指定的class名称{ 性质:值; } 属性选择器:对带有指定属性的HTML元素设置样式 属性选择器,属性和值选择器在IE6一下版本是不支持的 方式: <style type="text/css"> [title]{ color:blue; } [title=te]{ color:red; } </style> 然后在指定的标签内指定title属性值即可改变颜色 CSS样式->字体、连接、列表、表格、轮廓 CSS背景:CSS允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果 background-attachment 背景图像是否固定或者随着页面的其余部分滚动 background-color 设置元素的背景颜色 background-image 把图片设置为背景 background-position 设置背景图片的起始位置 background-repeat 设置背景图片是否及如何重复 background-size 规定背景图片的尺寸 background-origin 规定背景图片的定位区域 background-clip 规定背景的绘制区域 CSS文本:CSS文本属性可以定义文本外观 通过文本属性,可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本缩进 *表示比较常用的 color 文本颜色* direction 文本方向 line-height 行高 letter-spacing 字符间距 text-align 对齐元素中的文本* text-decoration 想文本添加修饰 text-indent 缩进元素中文本的首行* text-transform 元素中的字母* unicode-bidi 设置文本方向 white-space 元素中空白的处理方式 word-spacing 字间距 text-shadow 向文本添加阴影 word-wrap 规定文本的换行规则 CSS的字体:css可以定义文本的字体系列、大小、加粗、风格和变形 font-family 设置字体系列 font-size 设置字体的尺寸 font-style 设置字体风格 font-variant 以小型大写字体或正常字体显示文本 font-weight 设置字体的粗细 CSS的连接:四种状态 a:link 普通的、未被访问的连接 a:visited 用户已访问的连接 a:hover 鼠标指针位于连接的上方 a:active 正在被点击 常见的连接样式:text-decoration属性大多用于去掉连接中的下划线 CSS列表: CSS列表允许防止、改变列表标志,或者将图像作为列表标志 list-style 简写列表项 list-style-image 列表项图像 list-style-position 列表标志位置 list-style-type 列表类型 一般以ID方式进行标记的话用在框架级别上,而class方式用在具体内容细节方面,一些数据的构造等方式 CSS的表格:表格属性可以帮助我们极大的改善表格的外观 boder-collapse 折叠边框(即只有一条线) border 边框显示 CSS的轮廓:主要是用来突出元素的作用 outline 设置轮廓属性 outline-color 设置轮廓颜色 outline-style 设置轮廓的样式 outline-width 设置轮廓的宽度 CSS盒子模型: 盒子模型包括margin(外边距)、border(边框)、padding(内边距)、content(包含宽和高width、height)部分 内边距属性(内边距在content外,边框内) padding 设置所有的边距 padding-bottom 设置底边距 padding-left 设置左边距 padding-right 设置右边距 padding-top 设置上边距 CSS边框:可以创建出效果出色的边框,并且可以应用于任何元素 边框样式: 通过关键字border-style关键字可以定义10中不同非继承样式(包括none) 可以进行单边框样式的更改:上下左右四个方向 border-top-style border-bottom-style border-left-style border-right-style 边框的宽度: border-width border-上下左右-width 边框颜色 border-color border-上下左右-color CSS3边框: border-radius :圆角边框 box-shadow :边框阴影 border-image :边框图片 对于阴影效果有四个参数: 1、向右移动几个像素 2、向下移动几个像素 3、阴影的透明度 4、颜色 外边距margin: margin margin-上下左右 外边距具有叠加的性质,如果两个样式的东西挨着设计margin则margin选择最大值得那个样式的margin值 CSS定位: 改变元素在页面上的位置 定位机制: 普通流->元素按照在其HTML中的位置顺序决定排布的过程 浮动 绝对布局 CSS的定位属性: position 把元素放在一个静态的、相对的、绝对的活固定的位置中 top 元素向上偏移量 bottom 元素向下偏移量 right 元素向右偏移量 left 元素向左偏移量 overflow 设置元素一处其区域发生的事情 clip 设置元素显示的形状 vertical-align 设置元素垂直对齐方式 z-index 设置元素的堆叠顺序 position属性:static/relative/absolute/fixed absolute效果是不再占用页面的位置 static时任何偏移量的关键字对齐都不产生影响 fixed当内容可以进行滚动时,fixed的内容不会滚动 CSS的浮动: float属性-> left 元素向左浮动 right 元素向右浮动 none 元素不浮动 inherit 从父级继承浮动属性 clear属性:去掉浮动属性(包括继承来的属性) clear属性值: left/right:去掉元素向左向右的浮动 both:左右两侧均去掉浮动 inherit:从父级继承来的clear的值
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。