CSS注释_2

由于上述方法是直接在标签的style属性里面写css样式代码，如果属性过多，容易造成页面结构混乱，不利于后期维护。将样式代码写在标签上，样式代码只对当前标签有效，代码不可重复使用！而且这种方式是不可能把html标签和css样式分开的！所以不推荐这种方法！（通过style属性添加的样式称为内联样式/内联样式）方法二：通过style标签引入css可以在head标签内添加style标签，在style标签内直接写css样式即可。所有的css样式代码都集中管理在一个style标签内，不会造成页面结构混乱，可以实现代码复用！初步实现了html标签代码和css样式代码的分离！/*****CSS样式*****/span{/*为当前html中的所有span标签设置Style*/border:2pxsolidgreen;font-size:30px;font-重量：更大胆；/*bold/bolder*/>方法三：通过link标签将外部css文件导入head标签内，可以通过link标签导入外部CSS文件。这种方式将所有的CSS代码集中在一个CSS文件中进行统一管理，真正实现了CSS代码和HTML代码的分离，实现了代码的分离。重用。代码示例：将demo.css文件导入html@charset"UTF-8";p{border:2pxsolidblue;color:red;font-family:"Chineseamber";text-indent:50px;}-----CSS选择器css选择器是一个工具可以帮助我们在html中选择元素进行装饰Gate技术标签名称选择器通过元素名称（或标签名称）选择所有具有指定名称的标签格式：元素名称/标签名称{css样式...}设置所有的背景颜色span标签为#efbdef，设置字体大小为22px，粗体；*/span{/*选择所有span元素*/background-color:#efbdef;font-size:22px;font-weight:bolder;}class选择器可以给元素添加一个通用属性--class，设置group为元素通过class属性属于哪个，具有相同class值的元素为一组。可以通过class值选择该组的元素，为元素添加样式。格式：.classvalue{cssstyle...}1）设置所有span（但不包括div和p标签下的span）的背景色为#faf77b，边框改为2px纯青色；(2)设置div下面的span和内容为“span111”的span，背景颜色设置为#5eff1e，字体颜色设置为#ec0e7e；*/.s1{/*选择类值为s1的所有元素*/background:#faf77b;border:2pxsolidcyan;}.s2{/*选择类值为s2的所有元素*/background:#5eff1e;color:#ec0e7e;}一个元素也可以设置多个class值，多个class值之间用空格隔开，`span111`表示当前元素属于多个组同时，多组上设置的样式也会同时作用于当前元素。如果多个组设置相同的样式（但取值不同），样式就会冲突，后面写的样式会覆盖前面的样式！id选择器可以通过标签上的公共属性id为标签设置一个唯一的编号（id值应该是唯一的），通过id值可以唯一选择一个元素。格式：#idvalue{cssstyle}20px。*/#p1{/*选择id值为p1的元素*/font-size:24px;color:#a06649;text-indent:20px;这是一个p元素！！！

后代选择器选择指定元素内部的指定后代元素格式：ancestordescendant{cssstyle...}pink;*/pspan{/*匹配所有p元素内部的所有span元素*/font-size:18px;color:red;background:pink;}/*p,span{}匹配所有p元素和所有span元素*/这是一个p元素！！！这是一个span元素！！！

所有文本输入框的属性选择器，设置背景色为#FF7CCC，字号22px，首行文本缩进15px；*/input[type='text']{/*匹配所有类型值为text的input元素*/background:#FF7CCC;font-size:22px;text-indent:15px;}input[type='text'][name='email']{/*选取所有type值为text，name为email的input元素*/background:yellow;}-----常用属性汇总Text属性text-align：设置文本水平对齐方式在元素内部，它常用的值是：left：默认值。leftalignmentright：右对齐center：居中对齐justify：两端对齐text-decoration：设置文本的下划线样式，常用值为：underline：下??划线none：无下划线text-indent：设置首行缩进文字数量，单位：像素/百分比letter-spacing：设置字符间距/间距，常用值为：normal像素值text-shadow：设置字体阴影，其值为：像素值像素值像素值颜色值第一个值为阴影水平位移，第二个值是阴影垂直位移，第三个值是阴影扩散值，第四个值是阴影颜色字体属性font-size：设置字体大小font-weight：设置fontweightnormal,bold,bolder100/200/300../900font-family：设置字体，如微软雅黑、黑体、楷体等color：设置字体颜色背景属性background-color：设置背景颜色background-image：设置背景图片，url('图片的路径');background-repeat：设置或获取对象的背景图片是否以及如何排列，常用值：repeat（默认值，重复排列）repeat-x（水平重复排列，垂直不重复）repeat-y（垂直重复，但不是水平方向）no-repeat（不重复）border（边框）border:2pxsolidred;--设置元素的边框（边框的宽度、样式、颜色可以同时设置）border属性可以split为如下设置：order-width:2px;--设置元素边框的宽度order-style:solid;--设置元素边框的样式border-color:red;--设置元素边框的颜色，其中border-width、border-style和border-color也可以按照上、右、下、左方向拆分。以border-width为例：border-top-width:2px;--设置上边框的宽度border-left-width:2px;--设置左边框的宽度border-right-width:2px;--设置右边框的宽度border-bottom-width:2像素；--设置下边框的宽度。显示属性display用于设置元素的类型。常用值有：block：块级元素的默认值。多个内联元素可以在同一行。一般不能设置宽高。inline-block：行内块元素的多个元素可以显示在同一行，也可以设置宽高。none：表示隐藏元素其他属性width：设置元素的宽度height：设置元素的高度margin：设置元素的外边距margin-top：10px；--设置元素的上边距为10px；右边距：20px；--设置元素的右外边距为20px；底部边距：30px；--设置元素的下边距为30px；左边距：40px；--设置元素的左边距为40px;margin:10px20px30px40px;--右上左下，顺时针对应margin:10px20px30px;--上、左、下边距：10px20px；--上下左右边距：10px；--上、下、左、右均为10px；设置颜色值的常用方法有3种。有三种方式：设置颜色名称，例如：红、绿、蓝、黄、青、粉、白、黑等。方式二：设置#加一个六位十六进制值\#FF0000（红色），#00FF00（绿色）、#0000FF（蓝色）、#FFFF00（黄色）、#00FFFF（青色）等方法三：设置rgb颜色值rgb(255,0,0),rgb(0,255,0),rgb(0,0,255),rgb(255,255,0),rgb(0,255,255)==(red)(green)(blue)(yellow)(cyan)元素类型div/span/p是容器标签，用来包裹其他内容（这些元素本身并没有太多样式！）p：块级元素，默认独占一行，用于包裹一段文字（p标签用于在写文章时包裹每段内容)div：块级元素，默认独占一行，用于包裹其他内容，在div中设置样式，可以作用于div的内容span：内联元素，默认可以和其他元素显示在同一行。...(1)块级元素(block)默认情况下，块级元素占一行，可以设置宽度和高度。如果设置了，就是设置的宽高。如果不设置宽高，则宽度默认填满父级。元素，高度由内容决定（内容支持），如：div/p/h1~h6/form/table等元素都是块级元素（2）内联元素（inline）默认,多个内联元素可以不能在同一行设置宽高。比如span/input/img/i/b等元素都是行内元素（3）行内块元素（inline-block）具有行内元素的特性（可以在同一行显示），还有特性块级元素的数量（宽度和高度可以设置）