Css介绍

.css 介绍\n层叠样式表，是一种样式表语言，用来描述HTML和XML文档的呈现。\n随着HTML的发展，为了满足页面设计者的要求，HTML添加了很多显示功能，但是随着这些功能的增加，使得HTML越来越杂乱\nHTML 页面也越来越臃肿，CSS便随之诞生\nCSS 用于简化HTML标签，把关于样式部分的内容提取出来，进行单独的控制，使结构与样式分离开发。\nCSS 是以HTML为基础，设置网页的外观显示样式，如字体、颜色、背景的控制及整体的布局等，和HTML 类似\nCSS也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。\n重点：\n\nCSS也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言\n CSS2.0的诞生才真正地把结构与样式          进行分离，从而得到快速的发展\n二.CSS基本语法\n2.1css 引入方式\n给HTML标签添加CSS样式总共有三种样式：行间样式、 内部样式和外部样式三种方式\n\n2.1.1行间样式引入\n在HTML标签中添加style属性来设置CSS。语法如下：\n\nstyle=\"属性1:值1;属性2:值2;属性3:值3;\"\nCSS样式由属性和值两部分组成，通过冒号的方式进行连接。多组样式之间使用分号（;）进行分\n割。一般规范会在分号后面加一个空格，这样更加方便阅读代码。\n\n例子：\n\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n    \u003Cmeta charset=\"UTF-8\">\n    \u003Ctitle>Title\u003C/title>\n\u003C/head>\n\u003Cbody>\n    \u003Cdiv style=\"width: 50px;height: 50px;background-color: red\">\u003C/div>\n   \n\u003C/body>\n\u003C/html>\n结果：\n\n\n\n 在这里就有了\u003Cdiv>的样式更改：：：：：：：记住\n\n注意：\n\n像素单位\n像素单位用px表示，全称 “pixel”。px就是一张图片中最小的点，或者是计算机屏幕最小的点。\n百分比单位\n百分比单位是一个相对单位，经常在嵌套标签中使用。假如给子标签（也叫内层标签）设置百分比单位，那么这个单位就是相对于父标签（也叫外层标签）的尺寸大小。\n例子：百分比\n\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n    \u003Cmeta charset=\"UTF-8\">\n    \u003Ctitle>Title\u003C/title>\n\u003C/head>\n\u003Cbody>\n    \u003Cdiv style=\"width: 50px;height: 50px;background-color: red\">\n    \u003Cdiv style=\"width:50%; height:50%; background-color: black\">\u003C/div>\n        \u003C/div>\n\u003C/body>\n\u003C/html>\n结果：\n\n\n\n2.1.2内部引入方式\n内部引入方式是通过\u003Cstyle>标签添加css样式，它与行间样式的区别是内部引入方式是通过\n\u003Cstyle>标签而不是style属性。\u003Cstyle>标签一般情况下都会添加到\u003Chead>标签中\n\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n    \u003Cmeta charset=\"UTF-8\">\n    \u003Ctitle>Title\u003C/title>\n    \u003Cstyle>\n        #s1{\n            background-color: yellow;\n            width: 52px;\n            height: 50px;\n        }\n    \u003C/style>\n\u003C/head>\n\u003Cbody>\n    \u003Cdiv style=\"width: 50px;height: 50px;background-color: red\">\n    \u003Cdiv style=\"width:50%; height:50%; background-color: black\">\u003C/div>\n    \u003C/div>\n    \u003Cdiv id=\"s1\"🆔>rgsdgfswfsf\u003C/div>\n\u003C/body>\n\u003C/html>\n\n\n 内部引入CSS样式，也遵循一定的CSS样式规范，语法格式如下：\n\n选择器 {属性1：值1; 属性2：值2; }\n2.1.3外部引入方式\n外部样式的写法与内部样式的写法完全一样\n只是外部引入方式是将css代码保存在扩展名为.css 的样式表中\n引入方式通过网页\u003Chead>\u003C/head>标签中使用\u003Clink>标记将外部样式表文件链接到HTML文档中。\n其语法如下：\n\u003Clink rel=\"stylesheet\" href=\"myself_style.css\" type=\"text/css\">\n语法中必须指定\u003Clink>标记的三个属性，其中href 是定义链接外部样式表文件的url，可以是相对路径或绝对路径；\nrel是定义当前文档与被链接文档之间的关系，\nstylesheet表示被链接的文档是样式表文件；\ntype是定义链接文档的类型，\ntext/css表示链接的外部文件为CSS样式表。\n三.基础属性\n3.1宽高\nCSS通过width、height这两个属性来设置HTML标签的尺寸和大小，即元素的宽高\n\n3.2背景样式\n背景样式的属性\n属性\t含义\nbackground-color \t设置背景色\nbackground-image \t设置背景图片\nbackground-reprat \t设置背景图片的平铺方式\nbackground-position \t设置背景图片的位置\nbackground-attachment \t设置背景图随滚动条的移动方式\n3.2.1背景色  background-color \n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n    \u003Cmeta charset=\"UTF-8\">\n    \u003Ctitle>Title\u003C/title>\n    \u003Cstyle>\n        #s1{\n            width: 500px;\n            height: 500px;\n            background-color: yellow;\n        }\n    \u003C/style>\n\u003C/head>\n\u003Cbody>\n\u003Cdiv style=\"width: 500px;height: 500px;background-color: red\">\u003C/div>\n\u003Cdiv id=\"s1\">\u003C/div>\n\u003C/body>\n\u003C/html>\n\n\n \n\n3.2.2背景图片   background-image\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n    \u003Cmeta charset=\"UTF-8\">\n    \u003Ctitle>Title\u003C/title>\n    \u003Cstyle>\n        #s1{\n            width: 500px;\n            height: 500px;\n            background-color: yellow;\n            background-image: url(\"太阳.jpg\");\n        }\n    \u003C/style>\n\u003C/head>\n\u003Cbody>\n\u003Cdiv style=\"width: 500px;height: 500px;background-image: url(下雨.jpg);\">\u003C/div>\n\u003Cdiv id=\"s1\">\u003C/div>\n\u003C/body>\n\u003C/html>\n\n\n 3.2.3 设置背景图片的平铺方式 background-repeat\n属性取值：\n\n参数\t说明\nrepeat\t水平垂直方向上都是重复平铺的，默认值\nrepeat-x \t只是水平方向重复平铺，垂直方向不重复平铺\nrepeat-y\t只是垂直方向重复平铺，水平方向不重复平铺\nno-repeat \t水平和垂直方向上都不进行重复平铺\n \n\n3.2.4设置背景图片的位置 background-position\n语法格式：\n\n \n\nbackground-position:x轴坐标 y轴坐标；\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n    \u003Cmeta charset=\"UTF-8\">\n    \u003Ctitle>Title\u003C/title>\n    \u003Cstyle>\n        #s1{\n            width: 200px;\n            height: 200px;\n            background-color: yellow;\n            background-image: url(\"太阳.jpg\");\n            background-repeat: repeat-y;\n            background-position: 20px 50px;\n        }\n    \u003C/style>\n\u003C/head>\n\u003Cbody>\n\u003Cdiv style=\"width: 200px;height: 200px;background-image: url(下雨.jpg);\">\u003C/div>\n\u003Cdiv id=\"s1\">\u003C/div>\n\u003C/body>\n\u003C/html>\n \n\n四.边框样式\n边框属性\t说明\nborder-color\t边框颜色 （四边）\nborder-width\t边框大小（四边）\nborder-style\t边框样式（四边）solid(实线) dashed(虚线) dotted(点线)\nborder-left-* \t左边框\nborder-right-*\t右边框\nborder-top-*\t上边框\nborder-bottom-*\t下边框\n五.文本样式\n文字相关属性 \t说明\nfont-family\t字体类型\nfont-size\t字体大小\nfont-weight\t字体粗细 （normal:正常 lighter:较细 bold: 较粗 bolder:很\n粗）\nfont-style \t字体样式\ncolor\t字体颜色\n例子：\n\nfont-family:字体1，字体2，字体3 /*可指定多种字体，多个字体按照优先顺序排列，以逗号隔开*/