CSS样式表基础知识.ppt

1、前端设计课程培训，云创科技专注于IT教育，现代网页设计CSS风格，网页编程/CSS，CSS结构，*内嵌格式：*外部链接文件，网页编程/CSS，CSS结构，*编写格式：内部标签：foo id: #foo class:foo，网页编程/CSS，CSS结构，*预置填充：0；将所有标签的内外边界设置为0 *正文默认*块面默认显示：块*线条默认边距： 0；padding : 0；border : 0；z-index : inherit；*图像预设img，一个img边框：0；保证金：0；划桨：0；网页编程/CSS，CSS结构，*默认：*表格默认表格空单元格：显示；边界塌陷：塌陷；显示空表格和合并表格行*默

2、认表格ul li list-style:无；*标题预置h1，H2，H3，H4，H5，h6 font-size : 1.6em*文本预设em，i font-style:正常；网页编程/CSS，CSS结构，*a默认值：* a默认值abackground:transparent宽度：100% * a:激活，a:悬停轮廓33600点击并滑动* a. linktext-decoration :无；颜色：#CCC未访问* a:已访问，a:悬停，a:活动文本装饰：无；文本样式，网页编程/CSS，CSS属性，*显示指定元素应该生成的框的类型无，块，内联，内联块，表，继承，网页编程/CSS，CSS属性，*静态，

3、相对，绝对和固定的定位元素与z索引，网页编程/CSS，CSS属性，*背景属性背景颜色背景图像背景-重复背景-位置背景-附件，网页编程/CSS，CSS属性，*宽度指定元素宽度20px，100% *高度*文本属性文本-缩进：首行缩进文本-对齐：文本对齐单词-间距：单词间距字母-间距：单词间距文本-转换：大小写转换文本-装饰：行属性空白-空间：处理空白字符方向：文本方向，网页编程/CSS，CSS属性，*字体属性字体-系列：字体选择字体-样式：字体倾斜字体-变体：设置小大写字母字体-粗细：粗体字体大小：字体大小字体：字体集合，网页编程/CSS，CSS属性，*列表属性列表样式-类型：列表标题边框-折叠：

4、边框折叠宽度、高度：宽度和高度列表样式：网址(示例. gif)内方文本-对齐：水平对齐垂直对齐：垂直对齐填充：15像素；页边距边框折叠、边框间距、标题侧、空单元格、表格布局、网页编程/CSS、CSS属性，*表格属性边框3360 1px纯蓝；边框-折叠：边框折叠宽度，高度：宽度和高度列表样式： url(示例. gif)文本内的正方形-对齐：水平对齐垂直对齐：垂直对齐边框-折叠，边框间距，标题侧，空单元格，表格布局，网页编程/CSS，CSS属性，*框属性，页面编程/CSS，CSS属性，*内部边距属性填充：顶部，右侧，底部和左侧填充-顶部：右侧填充-底部：底部填充-右侧：左侧*浮动属性浮动：定义元素

5、在左右方向浮动清除：清除浮动，网页编程/CSS，CSS属性，*溢出属性f指定当内容溢出元素框时的可见默认值。 内容不会被修剪，将在元素框外呈现。隐藏的内容被修剪，其余的不可见。滚动内容将被修剪，但浏览器将显示滚动条来查看其余内容。自动如果内容被修剪，浏览器将显示一个滚动条来查看其余的内容。Inherit指定溢出属性值应该从父元素继承。，网页编程/CSS，CSS属性，*选择器a *选择器分组体，H2，p，表，th，TD，pre，strong，emcolor3360gray，网页编程/CSS，CSS属性，*类选择器. foo *结合元素选择器p . importcolor 3360 red；*多级

6、选择器。重要字体粗细：粗体；警告字体-style : italic；重要警告背景： silver；网页编程/CSS，CSS属性，*标识选择器#foo *唯一性，区分大小写，网页编程/CSS，CSS属性，*属性选择器标题颜色：红色；ahref color:redahreftitle color:redimgalt border: 5px纯红；网页编程/CSS，CSS属性，*后代选择器h1 em color:red，网页编程/CSS，CSS属性，*子元素选择器h1强颜色：红色；网页编程/CSS，CSS属性，*相邻同级选择器h1 p页边距-top :50 px；网页编程/CSS，CSS属性，*伪类a

7、:hover *伪元素h 13360 Before content 3360 URL(logo . gif)；网页编程/CSS，CSS属性，*HTML标记总是向HTML文档添加声明，以便浏览器可以知道文档类型。在HTML 4.01中有三种声明。HTML5中只有一种，网页编程/CSS，CSS属性，*高级应用程序，网页编程/CSS()，CSS属性，*边框-半径-moz-边框-半径：25px圆角*框阴影，网页编程/CSS，CSS属性，*背景-大小-moz-背景大小背景大小*背景-原点-WebKit-背景-原点属性指定背景图片的定位区域。背景图片可以放在内容框、填充框或边框区域*背景图片：网址(BG

8、_ flower.gif)，网址(BG _ flower _ 2 . gif)；多种背景，网页编程/CSS，CSS属性，*文本-阴影文本阴影*文字-换行：断字；允许拆分长单词并将其换行到下一行：网页编程/CSS，CSS属性，*文本-阴影文本阴影*单词-换行：断字；允许拆分长单词并将其换行到下一行：网页编程/CSS，CSS属性，*字体-字体选择自定义字体-字体-字体-字体系列：我的第一个字体；src : URL(Sansation _ Light . TTF)，URL(Sansation _ Light . eot)；/* IE9 */div font-family : myfristfont；网页编程/CSS，CSS属性，*透明属性过滤器3360alpha(不透明度=50)；/*支持工业工程浏览器*/-moz-opa city 33600.50；/*支持FireFox浏览器*/opa city 33600.50；/*支持Chrome、Opera、Safari和其他浏览器*/、网页编程/兼容性、跨浏览器兼容性问题，*最好预先定义元素的外部和内部边距。这可以避免不同浏览器中的可见差异。-ms-trans