网站设计风格有几种,建模教程,海南省住建设厅网站报监的工程,深圳外贸建站一、CSS#xff1a;Cascading Style Sheet—层叠样式表#xff0c;其作用是美化HTML网页。 样式表分类#xff1a;内联样式表、内嵌样式表、外部样式表 1、内联样式表 和HTML联合显示#xff0c;控制精确#xff0c;但是可重用性差#xff0c;冗余多。 例如#xff1a;Cascading Style Sheet—层叠样式表其作用是美化HTML网页。 样式表分类内联样式表、内嵌样式表、外部样式表 1、内联样式表 和HTML联合显示控制精确但是可重用性差冗余多。 例如p stylefont-size:14px;color:#000;内联样式表/p 红色部分即内联样式表style即添加样式。 2、内嵌样式表 作为一个独立区域内嵌在网页里必须写在head标签里面。 例如style typetext/css p //格式对P标签有作用 /*以标签名命名的样式表对所有此类标签都会执行*/ { 样式 } /style 3、外部样式表 使用新建一个CSS文件用来放样式表。如果要在HTML文件中调用样式表需要在HTML文件中点右键→CSS样式→附件样式表。一般用link连接方式。 ★有些标签有默认的边距一般写样式表代码的时候都会先去除如下 style typetext/css * //对所有标签起作用 /*对所有标签去除边距和间距*/ { margin:0px; padding:0px; } /style 二、选择器 1、标签选择器 style typetext/css p--------------标签选择器 //对P标签起作用 { 样式 } 2、class类选择器。---都是以“.”开头。 head style typetext/css .main--------------------/*定义样式*/-----类选择器 { height:42px; width:100%; text-align:center; } /style /head body div classmain----------------调用class样式,可引用多次区别ID选择器 /div /body 3、ID选择器。以“#”开头。 head style typetext/css #main--------------------/*定义样式*/-----ID选择器 { height:42px; width:100%; text-align:center; } /style /head body div idmain----------------调用class样式仅可以引用一次区别与class选择器 /div /body 4、复合选择器 1、用“”隔开表示并列 style typetext/css p, span--------------对标签P和span两者都执行同样的样式 { 样式 } /style 2、用空格隔开表示后代。 style typetext/css .main p----------------类标签→p标签//首先找到引用“main”的标签对该标签中的P标签起作用 { 样式 } /style 3、筛选“.” style typetext/css p.sp----------------p标签→类标签//首先找到p标签对于p标签中引用了classsp的标签起作用执行以下样式 { 样式 } /style 三、练习 HTML headmeta http-equivContent-Type contenttext/html; charsetutf-8 /title无标题文档/titlestyle---------------内嵌样式表*-------------------------------------对所有标签去除边距和间距{ margin:0px; padding:0px; }/stylelink hrefyangshi1.css relstylesheet typetext/css /-----------------------------引用外部样式表/head bodydivp stylefont-size:24px; font-weight:bold; background-color:#FFC; color:#F00; text-align:center;你好,欢迎浏览/p--------内联样式表/divdiv classshi------------------引用类选择器p写一首诗/pp classshineirong床前明月光/p----------类选择器可多次引用p classshineirong哈哈哈哈哈/p----------类选择器可多次引用p classshineirong哈哈哈哈哈/pp classshineirong哈哈哈哈哈哈哈哈哈/p/divdiv idge-------------引用id选择器只能引用一次p唱一首歌/p/divdiv idwup跳个舞/p/divpa hrefhttp://www.baidu.com target_blank百度/a----------超链接/p/body/html 外部样式表 charset utf-8;/* CSS Document */style typetext/cssp{---------------------------标签选择器 margin:0px; padding:0px; }.shi{----------------------------类选择器 height:200px; width:200px; font-weight:bold; color:#F03; background-color:#CCC; text-align:center; }#ge{--------------------------id选择器 margin:0px 290px 0px; height:200px; width:300px; font-weight:bold; color:#F03; background-color:#0FF; text-align:center; line-height:200px; }.shineirong{ font-size:14px; color:#30F; font-weight:bold; line-height:40px; vertical-align:middle; }#wu{ height:auto; width:auto; font-size:24px; font-weight:bold; text-align:center; margin:10px; background:#0F0; }a:link{--------------------超链接样式未点击展示时样式 color:#000; font-weight:bold; font-size:35px; text-decoration:none; }a:visited{----------------------访问完成时样式 color:#000; }a:hover{----------------------鼠标指向悬浮时样式 color:yellow; } a:active{-----------------------点击时样式 color:green; }/style 转载于:https://www.cnblogs.com/jingzhenhua/p/5813379.html
