什么是CSS，有什么作用？\n

什么是CSS，有什么作用？\nCSS(Cascading Style Sheet)：层叠样式表语言。\nCSS的作用是：\n修饰HTML页面，修饰HTML页面张的某些元素的样式，让HTML页面更好看。\nCSS好比是HTML的化妆品一样。\nHTML还是主体，CSS依赖HTML。CSS的存在就是修饰HTML。所以新建的文件还是xxx.html文件。\nCSS我们要求掌握到什么程序？\n常见的CSS样式要求会写。\n别人写的CSS样式要能看懂。\n在HTML页面中嵌套使用CSS的三种方式\n第一种方式：在标签内部使用style属性来设置元素的CSS样式，这种方式称为内联定义方式。\n语法格式：\n\u003C标签> style=\"样式名:样式值;样式名:样式值;样式名:样式值;...\"\u003C/标签>\t\n1\n第二种方式：在head标签中使用style块，这种方式称为样式块方式。\n语法格式：\n\u003Chead>\n\t\u003Cstyle type=\"text/css\">\n\t\t选择器{\n\t\t\t样式名 : 样式值;\n\t\t\t样式名 : 样式值;\n\t\t\t......\n\t\t}\n\t\t选择器{\n\t\t\t样式名 : 样式值;\n\t\t\t样式名 : 样式值;\n\t\t\t......\n\t\t}\n\t\u003C/style>\n\u003C/head>\n1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12\n13\n14\n第三种方式：链入外部样式表文件，这种方式最常用。（将样式写到一个独立的xxx.css文件当中，在需要的网页上直接引入css文件，样式就引入了）\n这种方式容易维护，维护成本较低。\nxxx.css文件\n1.html中引入了\n2.html中引入了\n3.html中引入了\n4.html中引入了\n语法格式：\n\u003Clink type=\"text/css\" rel=\"stylesheet\" href=\"css文件的路径\"/>\n1\nHTML中引入CSS样式的第一种方式\n\u003C!doctype html>\n\u003Chtml>\n\t\u003Chead>\n\t\t\u003Ctitle>HTML中引入CSS样式的第一种方式：内联定义方式\u003C/title>\n\t\u003C/head>\n\t\u003Cbody>\n\t\t\n\t\t\u003C!--\n\t\t\twidth 宽度样式\n\t\t\theight 高度样式\n\t\t\tbackground-color 背景色样式\n\t\t\tdisplay 布局样式 (none表示隐藏，block表示显示)\n\n\t\t-->\n\t\t\u003Cdiv style=\"width : 300px; height : 300px; background-color : #CCFFFF; display : block; border-color : red; border-width : 1px; border-style : solid\">\u003C/div>\n\n\t\t\u003Cbr>\u003Cbr>\n\t\t\n\t\t\u003C!--\n\t\t\t边框样式还能这样写：\n\t\t\t\tborder : 1px solid black;\n\t\t-->\n\t\t\u003Cdiv style=\"width : 300px; height : 300px; background-color : #CCFFFF; display : block; border : 1px solid black\">\u003C/div>\n\n\n\t\u003C/body>\n\u003C/html>\n1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25\n26\n27\nHTML中引入CSS样式的第二种方式\n\u003C!doctype html>\n\u003Chtml>\n\t\u003Chead>\n\t\t\u003Ctitle>HTML中引入CSS样式的第二种方式：样式块\u003C/title>\n\n\t\t\u003Cstyle type=\"text/css\">\n\t\t\t/*\n\t\t\t\t这是CSS的注释\n\t\t\t*/\n\t\t\t/*\n\t\t\t\tid选择器\n\t\t\t\t语法格式：\n\t\t\t\t\t#id{\n\t\t\t\t\t\t样式名 : 样式值;\n\t\t\t\t\t\t样式名 : 样式值;\n\t\t\t\t\t\t样式名 : 样式值;\n\t\t\t\t\t\t...\n\t\t\t\t\t}\n\t\t\t*/\n\t\t\t#usernameErrorMsg {\n\t\t\t\tcolor : red;\n\t\t\t\tfont-size : 12px;\n\t\t\t}\n\n\t\t\t/*\n\t\t\t\t标签选择器\n\t\t\t\t语法格式：\n\t\t\t\t\t标签名{\n\t\t\t\t\t\t样式名 : 样式值;\n\t\t\t\t\t\t样式名 : 样式值;\n\t\t\t\t\t\t样式名 : 样式值;\n\t\t\t\t\t\t...\n\t\t\t\t\t}\n\t\t\t\t标签选择器作用的范围比id选择器广。\n\t\t\t*/\n\t\t\tdiv {\n\t\t\t\tbackground-color : black;\n\t\t\t\tborder : 1px solid red;\n\t\t\t\twidth : 100px;\n\t\t\t\theight : 100px;\n\t\t\t}\n\n\t\t\t/*\n\t\t\t\t类选择器\n\t\t\t\t语法格式：\n\t\t\t\t\t.类名{\n\t\t\t\t\t\t样式名 : 样式值;\n\t\t\t\t\t\t样式名 : 样式值;\n\t\t\t\t\t\t样式名 : 样式值;\n\t\t\t\t\t\t...\n\t\t\t\t\t}\n\t\t\t*/\n\t\t\t.myclass{\n\t\t\t\tborder : 1px solid red;\n\t\t\t\twidth : 400px;\n\t\t\t\theight : 30px;\n\t\t\t}\n\t\t\t\n\n\t\t\n\t\t\u003C/style>\n\t\u003C/head>\n\t\u003Cbody>\n\t\t\n\t\t\u003C!--\n\t\t\t设置样式字体大小12px，颜色为红色！\n\t\t-->\n\t\t\u003Cspan id=\"usernameErrorMsg\">对不起，用户名不能为空！\u003C/span>\n\n\t\t\u003Cdiv>\u003C/div>\n\t\t\u003Cdiv>\u003C/div>\n\t\t\u003Cdiv>\u003C/div>\n\n\t\t\u003Cbr>\n\t\t\u003C!--class相同的标签，可以认为是同一类标签-->\n\t\t\u00class=\"myclass\"/>\n\n\t\t\u003Cbr>\u003Cbr>\n\n\t\t\u003Cselect class=\"myclass\">\n\t\t\t\u003Coption>专科\u003C/option>\n\t\t\t\u003Coption>本科\u003C/option>\n\t\t\u003C/select>\t\n\t\n\n\t\u003C/body>\n\u003C/html>