01css基础、文字文本、背景列表.docx

CSS入门基础知识点：认识CSS传统HTML设计网页版面的缺点CSS的特点CSS的排版样式认识CSSCSS的英文全名是Cascading Style Sheets,中文可翻译为串接式排版样式,并且CSS2规范也于1998年02月通过W3C的审核与推荐,所以CSS并不是专为XHTML所设计的,CSS还可以被其他标记语言拿来制作排版样本,如HTML,XML文件都可以应用CSS,来美化网页的设计,大家如果学会CSS,在HTML,XHTML,XML文件中都可以使用.传统HTML设计网页版面的缺点使用传统HTML控制标记来设计网页,在先天上就无法与排版样本来做比较,因为HTML并非完全着眼在网页排版的功能上,而这对XHTML而言更是如此,因为XHTML有意将原先HTML中有关网页版面的标记或属性遗弃不用,如font,center,color,background等,所以对XHTML文件而言,其排版与显示的功能比HTML文件更弱,所以使用XHTML来设计网页更需要搭配CSS排版样本.CSS的特点HTML排版时的缺点：设置麻烦,修改麻烦,功能严重不足。CSS样式排版的优点：属性功能完整,排版文件可以独立存在,可以共用排版文件。CSS的基本语法选择符{样式描述1；样式描述2；…样式描述n;}eg:h1 {font-size:12px;color:#F00;}CSS的排版样式CSS样式排版的分类：行内样式,内部样式,外部样式；行内样式:格式: 标记名称style=”属性1:属性值1;属性2:属性值2”…/标记名称例: p style=”font-size:20pt;color:red;text-align:center”行内样式/p内部样式: 所有的样式定义都必须在style../style之间,而style../style又必须在head../head之间.CSS选择器：标记选择器、class选择器、id选择器、包含选择器、选择器组、通配选择器。 标记定义型格式:headstyle type=”text/css”h1{属性1:属性值1;属性2:属性值2;}div{属性1:属性值2;属性2:属性值2;}/style/headbodyh1…/h1div…/div/bodyclass定义型格式:headstyle type=”text/css”.aaa {属性1:属性值1;属性2:属性值2;}.aaa,.bbb {属性1:属性值1;属性2:属性值2;}/style/headbody标记名称 class=”aaa”…/标记名称标记名称 class=”bbb”…/标记名称/bodyid定义型格式:headstyle#aaa {属性1:属性值1;属性2:属性值2;}#aaa, #bbb {属性1:属性值1;属性2:属性值2;}/style/headbody标记名称 id=”aaa”…/标记名称标记名称 id=”bbb”…/标记名称/body外部样式:在head…/head之间使用link引入到页面中；格式：linkrel=”stylesheet” type=”text/css” href=URL /在head…/head之间使用import导入；格式： style type=text/css @import style.css /styleCSS规定,范围越小,优先级越高;行内样式内部样式表外部样式表ID选择符类Class选择符类型选择符通配符子元素可以继承父元素的样式风格子元素的样式不会影响父元素的样式风格CSS文字与文本知识点：CSS中长度与颜色CSS中的文字属性CSS中的文本属性CSS中长度与颜色长度单位说明in英寸cm厘米mm毫米em以目前字体高度为单位ex以小写字母高度为单位（大部分不支持）pt1pt/72英寸pc1pc/12ptpx像素（主要使用）颜色单位：说明十六进制如：color:#ff0000颜色名称如：color:red三原色单位如：rgb(255,0,0)单位换算： 1in = 2.54cm = 25.4 mm = 72pt = 6pc CSS中主要的文字属性属性名称属性值说明font-stylenormal正常显示italic斜体font-weightnormal正常显示bold粗体font-size像素字体大小百分比字体大小font-family字体名称设置字体名称font-style属性：eg：html代码：h1i慧与--洛阳国际软件人才产业基地(i)/i/h1h1慧与--洛阳国际软件人才产业基地(h1)/h1效果：加上样式之后：css代码：h1 {font-style: italic; }i { font-style: normal; }html代码：h1i慧与--洛阳国际软件人才产业基地(i)/i/h1h1