常用CSS样式

目录

CSS 定义 

CSS语法规则 

CSS选择器

网页中引入CSS样式

小结 

CSS基础样式

CSS高级选择器和盒子模型 

CSS 浮动

CSS 定位 

end 

---

CSS 定义 

中文名称：层叠样式表 。 英文全称：Cascading Style Sheets ，简称CSS。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

CSS语法规则 

选择器 {

        属性名：属性值;

        属性名：属性值;

        属性名：属性值;

……  }

div{
    color:red;
    font-size:25px;
}

CSS选择器

作用：用于选择或控制网页中的标签。 

分类：提供了标签选择器、类（class）选择器、id选择器三种基础选择器供开发者使用。

标签选择器：html中的所有标签都可以作为选择器。

类 选 择  器：body内的所有元素都有class属性。class名称可以重复使用。类（class）选择器使用标志符(句点)开头后面写上类的名称。

id  选 择  器：body内的所有元素都有 id 属性。一个页面中只能使用一个id名，id名必须是唯一。 id选择器使用散列符号（#）开头，后面写上id的名称。

网页中引入CSS样式

内联（行内）样式：html中的所有标签都有style属性，在style属性中直接写入css样式。 

<div style=“color:red;font-size:20px;”>这是内联样式 </div>

内部样式表：将html代码和css样式做简单分离，在网页头部创建style标签，在其中写入css样式。

外部样式表：将css样式单独写入到一个 xxx.css外部文件中。

步      骤：（1）使用link标签引入外部css文件。（2）使用@import导入外部css文件。

小结 

样 式 优 先 级：行内（内联）样式   >  内部样式表   >   外部样式表     （就近原则）

选择器优先级：id选择器  >  类（class）选择器  >  标签选择器

CSS基础样式

字体样式

font-family 字体类型：隶书”  “楷体”     其他（电脑中已有才能使用）

font-size    字体大小：像素：px

font-weight字体粗细：bold 定义粗体字符（100-900 定义由细到粗的字符）

font-style   字体风格： normal   默认值，标准文档样式；   italic       斜体

font            字体属性：字体风格 字体粗细 字体大小 字体类型（样式顺序不能变）

文本样式

color              设置文本颜色：red    #362596    rgb(32,250,50)      （三种颜色表达方式）

text-align       设置元素水平对齐方式：  left    center     right        （左对齐 居中 右对齐）

text-indent           设置首行文本的缩进

line-height           设置文本的行高

text-decoration设置文本的装饰 ：none:默认，标准文本； underline：定义文本下划线；

overline    ：定义文本上划线； line-through：定义穿过文本的一条线。

鼠标样式（cursor）

defalut  默认光标 ；pointer 超链接指针；wait 等待状态；help 指示可用的帮助；

text       指示文档；crosshair 鼠标呈现十字状。

背景样式

背景颜色background-color           ： red    #536256    rgb(30,250,13) （用一种即可）

背景重复方式background-repeat ：no-repeat不重复；repeat-x 水平重复repeat-y垂直重复；repeat 默认重复。

背景图片地址background-image  :   url(图片路径)：图片绝对路径 图片相对路径。

背景定位background-position      ：像素：px；

 水平方向：left、center、right ；垂直方向：top、center、bottom。

背景样式简写background             ：图片地址，图片重复方式，背景颜色，背景定位：网页开发中比较常用 属性值之间没有先后顺序。

列表样式：网页中的大部分内容都是使用列表制作的。 比如：网站导航栏，网页左侧菜单栏，网页底部信息栏，商品展示栏等。

list-style-type：（1）无序列表：disc 实体圆心（默认）；circle 空心圆；square 实体方心 none无列表标记。（2）有序列表： 1 / a / A / i  /  I 。

list-style-image：自定义列表标记为图片            属性值：url(图片路径)。

list-style-position：列表标记定位    outside    inside。

列表样式简写list-style：列表标记属性 自定义列表标记图片 列表标记定位。

CSS伪类：用于向某些选择器添加特殊的效果，伪类通常是动态产生的，临时的，并非常驻属性。 

link：单击访问前

visited：单击访问后

hover：鼠标悬浮其上

active：单击未释放

CSS高级选择器和盒子模型 

 并集选择器：多个选择器通过逗号连接而成。

div,p,span,.first,#helloid{
          color:red;
          font-size:20px;
     }

交集选择器  ： 由两个选择器连接构成，选中二者范围的交集，两个选择器之间不能有空格。第一个必须是标签选择器，第二个必须是类选择器或者ID选择器。

div.first{
          color:red;
          font-size:20px;
    }

后代选择器： 外层的选择器写在前面，内层的选择器写在后面，之间用空格分隔 。标签嵌套时，内层的标签成为外层标签的后代，且使用标签选择器、id选择器、类选择没有先后顺序。

div  .first{
         color:red;
         font-size:20px;
     }

子元素选择器： 通过  >  连接在一起而成，仅作用于子元素。

 div>.first{
         color:red;
         font-size:20px;
     }

属性选择器： 选取带有指定属性的元素，选取带有指定属性和值的元素。

 input[name]{
         border:1px soild red;
    }

    input[type=“text”]{
         border:1px soild red;
    }

 边框样式：

属性	说明	样式值
border-top-style	上边框样式	none：无边框 solid：实线边框 dashed：虚线边框 dotted：点状边框 double：双线边框 hidden： 与none相同，应用于解决边框冲突
border-right-style	右边框样式
border-bottom-style	下边框样式
border-left-style	左边框样式
border-style	设置四个边框样式

边框颜色：

border-top-color                                                   上边框颜色

border-right-color                                                 右边框颜色

border-bottom-color                                             下边框颜色

border-left-color                                                    左边框颜色

border-color                                                      边框颜色简写

边框粗细：

border-top-width                                                         上边框粗细

border-right-width                                                       右边框粗细

border-bottom-width                                                   下边框粗细

border-left-width                                                         左边框粗细

border-width                                                                         简写

 边框简写：border 同时设置四个边框的粗细、颜色、样式。

盒子模型之内边距(padding) ：

padding-top                                                              顶部内边距

padding-right                                                            右侧内边距

padding-bottom                                                        底部内边距

padding-left                                                              左侧内边距

box-sizing属性

content-box   盒子的实际宽度和高度仅应用于元素内容，不包括内边距和边框。

border-box     盒子的实际高度和宽度包括元素内容、边框和内边距。

盒子模型之外边距(margin)

margin-top顶部外边距                                           margin-bottom底部外边距     

margin-right右侧外边距                                         margin-left左侧外边距

标准文档流 

块级元素：<h1> - <h6>、<p>、<div>、列表等。

总是在新行上开始，占据一整行高度，

行高以及外边距和内边距都可控制，宽度始终是与浏览器宽度一样，与内容无关 

它可以容纳内联元素和其他块元素。

内联（行内） 元素：<span>、<a>、<img>、<strong>等

和其他元素都在一行上高，

行高及外边距和内边距部分可改变，

宽度只与内容有关，行内元素只能容纳文本或者其他行内元素

不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用。

display 属性

属性值：none  设置元素不会被显示；inline 元素显示为内联（行内）元素；

               block 元素会被显示为块级元素； inline-block 行内块元素。

display属性作用：控制元素的显示和隐藏；块级元素和内联（行内）元素的转变。

CSS 浮动

float 属性：float是css样式中的定位属性，用于设置标签对象的浮动布局。 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

 left      元素向左浮动                           例 float：left

right     元素向右浮动                           例 float：right

none    默认值，元素不浮动                例  float：none

 clear 属性：clear属性规定了在元素的哪一侧不允许有浮动。

none   默认值，允许浮动元素出现在两侧；       left   在左侧不允许浮动元素；

right    在右侧不允许浮动元素；                         both 在左、右两侧不允许浮动元素。

overflow 属性：

visible                 默认值。内容不会被修剪，会呈现在盒子之外。

hidden                内容会被修剪，并且超出的内容是不可见的。

scroll                  内容会被修剪，但是浏览器会显示滚动条以便查看超出内容。

auto                    自适应，如果内容被修剪，则浏览器会显示滚动条来查看超出内容。

CSS 定位 

position 属性：

position 属性规定元素的定位类型，定义建立元素布局所用的定位机制。 任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素是什么类型。 相对定位元素会相对于它在正常流中的默认位置偏移。

static     ：    默认值，没有定位 元素会以标准文档输出。 

relative  ：相对定位 

absolute：绝对定位

fixed      ：固定定位

position 属性小结 ：

一、fixed 固定定位
                (1) 使用了固定定位的元素【会】 脱离标准文档流。
                (2) 基于 浏览器窗口 进行偏移。
                (3) 所有定位元素都基于 top、left、right、bottom四个方位进行偏移。

 二、relative 相对定位
                (1) 使用了相对定位的元素【不会】 脱离标准文档流。
                (2) 基于 自身原来在网页中的位置 进行偏移。
                (3) 所有定位元素都基于 top、left、right、bottom四个方位进行偏移。

 三、absolute 绝对定位
                (1) 使用了绝对定位的元素【会】 脱离标准文档流。
                (2) 使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。
                (3) 所有定位元素都基于 top、left、right、bottom四个方位进行偏移。

end