CSS样式表详解-优快云博客

本文链接：https://blog.youkuaiyun.com/LazyCode_Cat/article/details/57955461

推荐代码学习：zen garden(茶艺花园)

CSS 指层叠样式表（Cascading Style Sheets），层叠的意思是：多重样式定义被层叠为一。
CSS 是标准的布局语言，用来控制元素的尺寸、颜色、排版。
CSS 非常精确，功能强大，易于编写。 CSS 由 W3C 发明，用来取代基于表格的布局、框架以及其他非标准的表现方法。

样式 (style) 定义如何显示 HTML 元素；样式通常存储于样式表中；外部样式表存储于 CSS 文件中。
外部样式表 (External Style Sheet) 可以极大地提升你的工作效率，并且极大地节约服务器的带宽。
纯 CSS 的布局与 XHTML 的结合，可使表现与结构分离，并使站点更易维护，易用性更好。

使用css样式表的方式有三种：

1.内联方式：样式定义在单个的HTML元素中<h1 style="background-color:silver;color:blue;"/>文本</h1>
2.内部样式表：样式定义在HTML页的头元素中<style type="text/css">h1{background-color:silver;color:blue;}</style>

3.外部样式表：将样式定义在一个外部的CSS文件中（.css文件）h2{color:green;background-color:silver;}，然后在head里面引用样式表文件，使用<link rel="stylesheet" type="text/css" href="2.css">

css样式表的特性：继承性（大多数CSS样式规则可以被继承）、层叠性（可以定义多个样式，不冲突时，多个样式表可层叠为一个）、优先性（内联样式优先级高于外部样式表，外部样式表和内部样式表优先级一样，谁在下面谁的优先级就高，一个样式内部中两个相同样式最后一个的优先级高，离内容比较近的优先级高，优先级最低的是浏览器缺省设置）、可重用性

！important规则，可以调整样式表规则的优先级，将！important添加在样式规则之后，分号之前，中间用空格隔开：属性{属性值！important；}。但是！important要慎用，可能会造成不可预料的后果。

CSS中的选择器：

1)通用选择器：显示为一个星号（*），可以与任何元素匹配，页面中所有元素都可以是这个样子，会导致CSS使用效率低下

2)元素选择器：也叫标签选择器，例如p标记，用于定义页面中所有该元素的属性

      3)自定义选择器，包含如下：
          1. 类选择器：.className{color:red;},此处类名称可以自己来定义，不能为纯数字，也不可以以数字开头。可以满足人们多样化的样式需求。类选择器必须要调用才能使用。首先创建类选择器，.kuang{color:red;},然后调用类选择器<input type="text" name="username" class="kuang"/>
          2.  ID选择器：特点是不重复，有且仅有一个，同一个ID在一个网页中不能多次使用。#IDName{color:red;}
       4)复合选择器，包含如下：
           1.群组选择器：将一个相同的规则作用于多个元素，选择器声明可以以逗号隔开相同的列表，如：h1,.kuang{border:1px;}
           2. 后代选择器：依据元素在其位置的上下文关系来定义样式，元素之间用空格隔开，例：h1 span{color:red;}
           3.子代选择器：只能用在一个元素的直接子元素下面，其子元素的子元素是不能显示出来的，用大于号连接表示h1>span{color:red;}
      5) 伪类选择器主要用于向某些选择器添加特殊效果，和基础选择器结合使用，用冒号连接，现在主要了解链接伪类和动态伪类：
          1. 链接伪类：
               :link适用于尚未访问的链接
               :visited使用与访问过的链接
          2. 动态伪类,用于呈现用户动作：
               :hover适用于鼠标悬停在HTML元素时(hover必须写在visited下面，否则会被visited属性覆盖掉)
               :active适用于HTML元素被激活时
               :focus适用于HTML获取焦点，比如在input里面点击输入文字时使用
                 例：a:link{color:red;font-size:10pt;}

链接伪类只能使用与<a>元素，动态伪类可以适用于其它元素

可以将多个类选择器应用于同一个类元素，各个词之间用空格隔开，如

          .kuang{color:red;}
          .red{border:red solid 1px}
          <input type="text" name="username" class="kuang red"/>

1. 尺寸单位：%（百分比）、int（英寸）、cm(厘米)、mm(毫米)、pt（磅，1磅约等于1/72英寸）、px（像素，计算机屏幕上的一个点）、em(1em等于当前的字体尺寸，2em等于当前字体尺寸的2倍)

2. 颜色的表示方式：
   rgb(x,x,x):rgb值，如rgb(255,0,0)
   rgb(x%,x%,x%):rgb百分比值，如rgb(100%,0%,0%)
   #rrggbb:十六进制，如#f0f0f0
   表示颜色的英文单词，如red

3.尺寸属性用于设置元素的高度和宽度，单位一般为像素或半分比
  高度属性：
      height
      min-height
      max-height
  宽度属性：
      width
      min-width
      max-width

溢出：使用尺寸属性控制框的大小时，如果内容所需的空间大于框本身的空间，会导致内容溢出。
overflow：当内容溢出元素框时如何处理：visible，hidden，scroll(任何情况下都会显示滚动条)，auto（视情况决定是否显示滚动条）
overflow-x
overflow-y

哪些HTML元素可以设置尺寸属性：

块级对象，如：p,div,h1~h6,ul,ol,dl,dt,dd等

存在width,height属性的HTML元素，如;img,table等

边框：
简写方式：border:width style color;
单边定义：border-left/right/top/bottom:width style color;
border-width: border-left/right/top/bottom-width
border-style:border-left/right.top/bottom-style
border color:border-left/right.top/bottom-color
隐藏边框有三种方式：第一种是将border-syle设置为none，边框完全不存在，不占宽度,第二种是将border color设置为transparent（创建有宽度的不可见边框，此处边框仍然存在的，占宽度）。第三种是将border-width设置为0px,即border-width=0px，这种方式边框仍然存在的，占宽度;对按钮设置边框案例：
<style type="text/css">
    .btn{
       width=100px;
       height=24px;
       background-color=#336699;
       color=#fff;
       bordercolor=transparent;
     }
  </style>
<body>
   <form>
     请留下您的意见<br/>
     <textarea class="kuang"></textarea></br>
     <input class="btn" type="submit" value="提交">
   </form>
</body>

boder-style取值：solid（实线），dashed（虚线），dotted(点线)，none(此处边框彻底没有了)

边框倒角，即圆角：
border-radius 属性（有兼容性问题）：为简写属性，按顺时针顺序设置四个倒角，取值为绝对值或者百分比，如果想让圆角看起来是若有若无的，取值2就可以了，如果想要看起来明显一点圆润一点取值为6就可以，一般不超过6，最常见的取值是4，2,6三个
单独定义：border-top-left-radius:边框左上角
                border-top-right-radius:边框右上角
                border-bottom-left-radius:边框左下角
                border-bottom-right-radius:边框右下角
笼统的写border-radius：2px 6px 10px 0px这种写法也可的，依次表示左上角、右上角、右下角、左下角。
border-radius：2px 6px表示左上角和右上角，右下角和左下角的值默认和对角线的值一样的
border-radius：2px 6px 10px道理同上，没有被定义的角值和对角线的值一样
.btn{
       width=100px;
       height=24px;
       background-color=#336699;
       color=#fff;
       bordercolor=transparent;

border-radius：2px 6px 10px

}

边框阴影（也有兼容性问题）
box-shadow:向方框中添加一个或多个阴影，取值为多个属性值得列表：box-shadow：h-shadow v-shadow blur spread color inset;（此处直接写具体的属性值是多少就行了，不用添加属性名称，如box-shadow：2px 2px 0px 20px #222 一般情况下写前三个属性值就可以看到一个阴影效果了，在解析时会按顺序依次解析
其中
h-shadow：必需，为水平阴影的位置，单位为px
v-shadow：必需，为垂直阴影的位置,单位为px
blur：可选，为模糊距离,单位为px
spread：可选，为阴影的尺寸，可当做在原来基础上阴影向外扩展这么多像素，单位为px,一般用不着
color：可选，为阴影的颜色。默认是黑色的。原则上不定义颜色是没问题的，但是会受到其他元素的色彩属性影响可能看不到阴影或出现其他颜色，这时候可以添加颜色就能看到了。
inset：可选，将外部阴影（outset）改为内部阴影

图片边框：
border-image属性：将图片规定为包围div元素的边框，语法：border-image：source width repeat；也可以分别进行设置.其中source就是文件路径，width是图片大小，不需要加px,浏览器会直接将数字解析为多少px,图像大小可以在ps中量出来，决定了图像裁剪的大小，而border-width中的大小决定的是图像显示的大小。border-image 会自动对图像进行九宫格切片，四个顶点就是图像中四个顶点保持不变，中间其他各边按照定义的方式进行变化，平铺或拉伸。border-image-repeat:属性值有repeat（平铺）、round（铺满）、stretch（拉伸）
例：border-image：url(border.jpg) 26 repeat；

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
简写方式：outline:color style width;
outline-width:轮廓的宽度
outline-style:轮廓的样式
outline-color:轮廓的颜色
outline如果不要的话，可以简单写为0，如：input{outline:0;},在谷歌里input容器本身是自带outline
例：outline:#f00 solid 2px;此处不定义样式是无法显示出来的，和border类似

总结下自己在CSS中犯的错误：
错误一：代码中没有设置div属性，网页中无法显示出来
<!doctype html>
<html>
<head>
  <title>Document</title>
  <meta charset="UTF-8">
</head>
<body>
  <div >
    这是一个固定宽度的块
  </div>
</body>
</html>
错误二：样式表中，属性值用“=”号连接导致不可用，要用冒号“：”
<!DOCTYPE HTML >
<html>
<head>
  <title> 001练习 </title>
  <meta charset="UTF-8"/>

<body>
<div>这是一个块</div>
</body>
</html>
错误三：<style type="text/css"></style>此处的type属性不能忘记写。另外border=1px solid black;这个才是表示边框的属性，下面的color设置的是字体颜色和背景色。