正文

css属性、样式、边框、选择器

IP云
IP云V管理员/10 阅读
08/03
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

CSS

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，

用来描述 HTML或 XML(包括如 SVG、MathML、XHTML 之类的 XML 分支语言)文档的呈现。

CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

网页三要素:

  • HTML标签决定页面上元素的基本结构

  • CSS 用于设置HTML元素的样式

  • JavaScript 用于控制页面上的行为

1、CSS属性 ( property )

CSS 属性的基本用法为:

name : value ;

注意:

  • name 表示 CSS 属性(property)名称，不是 HTML 元素的属性(attribute)

  • 属性名称 和 属性值 之间 使用 冒号 隔开

  • 每个样式描述结束后，建议以分号结束 ( 分号也是两个不同的样式之间的分隔符 )

比如:

width : 300px ;

某个属性取值中包含多层含义时，属性值的多个部分之间使用空格隔开，比如

border : 1px  solid  blue ;

其中的 1px 表示边框粗细，solid 表示边框样式，blud 表示边框颜色。

当存在多个属性时，多个属性之间使用冒号隔开:

2、四种用法

在 HTML 文档中使用 CSS 有四种不同的用法，这里分别予以简单介绍。

2.1、内联样式

直接通过元素的 style 属性来指定的样式被称作内联样式 (也有人称作 行内样式 )。

比如:

<div style=" border : 1px solid blue ; width : 50% ; height : 100px ; " >
</div>

说的更直接些，就是在开始标签中通过标签的 style 属性(attribute)来指定元素的样式。

必须注意，这里的 style 属性(attribute)是属于 当前元素 的 (即当前标签的)。

2.2、内部样式

所谓内部样式，就是在 HTML 文档中，通过 style 元素来嵌入CSS样式。

<style type="text/css"></style>

这里需要特别注意，style 是一个 HTML 标签，属于HTML范畴，不属于CSS代码。

而在 <style> 和 </style> 之间书写的内容才属于 CSS 代码。

通常建议将 style 元素 添加到 head 元素内部:

<head>
<style type="text/css"> </style>
</head>

也可以根据实际情况来确定 style 元素的位置。

2.3、链接外部样式

通常在 HTML 文档的 head 区域通过 link 标签来链接外部样式文件:

<link rel="stylesheet" href="CSS文件名" type="text/css" charset="字符编码" >

其中:

  • rel 属性必须显式书写，且其属性值必须为 stylesheet ，否则链接无效

  • href 属性用于指定CSS样式文件名

  • type 属性是可选的，用于指定被链接文件的 MIME 类型

  • charset 属性也是可选的，用于指定被链接文件的字符编码

2.4、导入外部样式

在 head 区域除了通过 link 来链接外部样式文件外，还可以在 <style> 元素导入外部样式:

<style type="text/css">
 
@import url(CSS文件名);
 
</style>

注意:

  • @import 和 url( ) 中间至少有一个空格

  • 通过 url( ) 来指定 CSS文件名

3、常用CSS属性

3.1、元素尺寸

元素尺寸设计元素宽度和高度两个属性。

3.1.1、宽度

在CSS代码中通过 width 属性可以控制元素的宽度，其用法为:

width : value ;

比如:

width : 500px ;

宽度取值可以使用 像素为单位 ，也可以使用 百分比，比如:

width : 50% ;

采用百分比时需要注意，元素的实际宽度都是相对于其父元素的宽度来确定的。

3.1.2、高度

在CSS代码中通过 height 属性可以控制元素的高度，其用法为:

height : value ;

3.2、边框

元素的边框涉及属性较多，

不仅涉及 粗细 、风格 、颜色 等属性，

还可以针对某一条边来设置边框的 粗细、风格、颜色 等。

3.2.0、边框阴影

  1. 阴影的一个使用特例是卡片效果

    实例：

     div.card {    
         width: 250px;    
         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);       text-align: center;
    }

  2. 水平阴影，垂直阴影，模糊的距离，以及阴影的颜色：

    div {
    box-shadow: 10px 10px 5px grey;
    }

  3. 在 ::before 和 ::after 两个伪元素中添加阴影效果

    #boxshadow {
       position: relative;
       b ox-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
       pa dding: 10px;
       bac kground: white;
    }
    #boxshadow img {
        width: 100%;
        border: 1px solid #8a4419;
        border-style: inset;
    }
    #boxshadow::after {
        content: '';
       position: absolute;
       z-index: -1; /* hide shadow behind image */
       box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
       width: 70%;
       left: 15%; /* one half of the remaining 30% */
       height: 100px;
       bottom: 0;
    }

  4. box-shadow: 0 0 3px 2px #e2e2e2;/上下平移量，左右平移量，模糊距离，阴影距离，颜色/transition: all 0.2s;
      

3.2.1、四周边框

所谓四周边框，就是批量设置四条边的边框，让四条边具有相同样式的边框。

3.2.1.1、四周边框粗细

批量设置四边边框粗细可以通过 border-width 属性来实现:

border-width : width ;

3.2.1.2、四周边框风格

批量设置四边边框风格可以通过 border-style 属性来实现:

border-style : none | solid | double | dotted | ... ;

3.2.1.3、四周边框颜色

批量设置四边边框颜色可以通过 border-color 属性来实现:

border-color : color ;

3.2.1.4、四周边框

批量设置四边边框的 粗细、风格、颜色 可以通过 border 属性来实现:

border : width style color ;

注意 border 属性值的书写顺序:

  1. 粗细 ( width )

  2. 风格 ( style )

  3. 颜色 ( color )

3.2.2、顶部边框

所谓顶部边框，就是单独设置顶部的边框，让顶部边框具有独立的样式。

3.2.2.1、顶部边框粗细

单独设置顶部边框粗细可以通过 border-top-width 属性来实现:

border-top-width : width ;

3.2.2.2、顶部边框风格

单独设置顶部边框风格可以通过 border-top-style 属性来实现:

border-top-style : none | solid | double | dotted | ... ;

3.2.2.3、顶部边框颜色

单独设置顶部边框颜色可以通过 border-top-color 属性来实现:

border-top-color : color ;

3.2.2.4、顶部边框

依次设置顶部边框的 粗细、风格、颜色 可以通过 border-top 属性来实现:

border-top : width style color ;

注意 border-top 属性值的书写顺序:

  1. 粗细 ( width )

  2. 风格 ( style )

  3. 颜色 ( color )

3.2.3、低部边框

所谓低部边框，就是单独设置低部的边框，让低部边框具有独立的样式。

3.2.3.1、低部边框粗细

单独设置低部边框粗细可以通过 border-bottom-width 属性来实现:

border-bottom-width : width ;

3.2.3.2、低部边框风格

单独设置低部边框风格可以通过 border-bottom-style 属性来实现:

border-bottom-style : none | solid | double | dotted | ... ;

3.2.3.3、低部边框颜色

单独设置低部边框颜色可以通过 border-bottom-color 属性来实现:

border-bottom-color : color ;

3.2.3.4、低部边框

依次设置低部边框的 粗细、风格、颜色 可以通过 border-bottom 属性来实现:

border-bottom : width style color ;

注意 border-bottom 属性值的书写顺序:

  1. 粗细 ( width )

  2. 风格 ( style )

  3. 颜色 ( color )

3.2.4、左侧边框

所谓左侧边框，就是单独设置左侧的边框，让左侧边框具有独立的样式。

3.2.4.1、左侧边框粗细

单独设置左侧边框粗细可以通过 border-left-width 属性来实现:

border-left-width : width ;

3.2.4.2、左侧边框风格

单独设置左侧边框风格可以通过 border-left-style 属性来实现:

border-left-style : none | solid | double | dotted | ... ;

3.2.4.3、左侧边框颜色

单独设置左侧边框颜色可以通过 border-left-color 属性来实现:

border-left-color : color ;

3.2.4.4、左侧边框

依次设置左侧边框的 粗细、风格、颜色 可以通过 border-left 属性来实现:

border-left : width style color ;

注意 border-left 属性值的书写顺序:

  1. 粗细 ( width )

  2. 风格 ( style )

  3. 颜色 ( color )

3.2.5、右侧边框

所谓右侧边框，就是单独设置右侧的边框，让右侧边框具有独立的样式。

3.2.5.1、右侧边框粗细

单独设置右侧边框粗细可以通过 border-right-width 属性来实现:

border-right-width : width ;

3.2.5.2、右侧边框风格

单独设置右侧边框风格可以通过 border-right-style 属性来实现:

border-right-style : none | solid | double | dotted | ... ;

3.2.5.3、右侧边框颜色

单独设置右侧边框颜色可以通过 border-right-color 属性来实现:

border-right-color : color ;

3.2.5.4、右侧边框

依次设置左侧边框的 粗细、风格、颜色 可以通过 border-right 属性来实现:

border-right : width style color ;

注意 border-right 属性值的书写顺序:

  1. 粗细 ( width )

  2. 风格 ( style )

  3. 颜色 ( color )

3.4、背景

3.4.1、背景颜色

background-color : color :

默认值为 transparent ( 即透明 )

3.4.2、背景图片

background-image : url( "图片路径" ) :

默认值为 none ( 即没有背景 )

3.4.3、平铺背景图

background-repeat : repeat | repeat-x | repeat-y | no-repeat :

默认值为 repeat ( 即平铺 )

3.4.4、背景图位置

  • 通过 像素 或 其它单位 来设置背景图片的位置

background-position : xpos ypos :

其中的 xpos 表示水平位置，ypos 表示垂直位置。

  • 通过百分比来设置背景图片的位置

background-position : x% y% ;

其中的 x% 表示水平位置，y% 表示垂直位置。

  • 通过单词来设置背景图片的位置

background-position : top left ;

垂直位置使用 top 、center 、bottom 来表示上中下，水平位置使用 left 、center 、right 表示左中右。

当仅仅指定了单个单词时，另一个单词将默认为 center，比如 background-position : top ; 。

background-position 的默认值为 0 0 ( 即默认放在左上角 )

3.4.5、背景图尺寸

在 CSS 中通过background-size 属性规定背景图像的尺寸，其用法为:

background-size : length | percentage | cover | contain ;

其中:

  • length 表示通过 像素 或 其它单位 来设置背景图像的尺寸

background-size : width  height ;

第一个值用于设置宽度，第二个值用于设置高度。

如果只设置一个值，则第二个值会被设置为 "auto" 。

  • percentage 表示通过百分比来设置背景图像的宽度和高度

background-size : width%  height% ;

第一个值设置宽度，第二个值设置高度。

如果只设置一个值，则第二个值会被设置为 "auto"。

  • cover 表示用背景图像覆盖整个元素

background-size : cover ;

把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

背景图像的某些部分也许无法显示在背景定位区域中。

  • contain 表示元素内容区域包含背景图像

background-size : contain ;

把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

3.4.6、背景图固定方式

背景图像的固定方式有三种:

  • 背景图像置相对于元素本身固定

    • 此时的背景图像会随着包含它的区块一起滚动

    • 此时的背景图像不会随着元素内容的滚动而滚动

    • 这是默认值

  • 背景图像相对于视口(viewport)固定

    • 此时的背景图像不会随着包含它的区块一起滚动

    • 此时的背景图像不会随着元素内容的滚动而滚动

    • 并且仅当视口中显示包含它的区块时才显示该背景

  • 背景图像相对于元素内容固定

    • 此时的背景图像会随着包含它的区块一起滚动

    • 此时的背景图像会随着元素内容的滚动而滚动

    • 背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框

在CSS中通过 background-attachment 属性来控制背景图像的移动方式:

background-attachment : scroll | fixed | local ;

3.4.7、背景图绘制区域

3.4.8、背景图定位区域

4、选择器

选择器 ( selector ) 也称作 选择符，用于在 CSS 中选择页面上的元素，从而为元素设置样式。

选择器可以分为四类十七种，我们将其简化，仅分作两个大类: 基本选择器 、派生选择器 。

4.1、基本选择器

4.1.1、标记选择器

标记选择器 也称作 标签选择器 ，英文中写作 tag selector ，其基本用法为:

tagName {
propertyName : propertyValue ;
  ...
}

其作用是选择页面上所有匹配于该 tagName 的元素

4.1.2、class选择器

class 选择器 也称作 class 选择符，英文中称作 class selector ，其基本用法为:

.className {
​
}

其作用是选择页面上 class 属性中 包含 指定 className 的元素。

因为在同一个HTML元素的 class 属性中可以包含 0 ~ n 个 className ，比如:

<div class="success">
  在 div 元素的 class 属性中仅使用单个 className
</div>
​
<p class="first success">
  在 p 元素的 class 属性中指定两个 className
</p>
​
<span class="flag success test">
  在 span 元素的 class 属性中指定三个 className
</span>

因此通过 .success 就可以选择以上代码中的 div 、p、span 元素:

.success {
color : red ;
}

另外注意:

将 这里的 class selector 翻译成 类选择器 ，将 className 翻译成 类名 是及其不合适的。

应该大胆地鄙视这种说法、勇敢地去纠正这种说法。

4.1.3、属性选择器

属性选择器 也称作 属性选择符，英文中称作 attribute selector 。其基本用法为:

[attributeName] {
​
}

其作用是根据 HTML 元素的属性来选择相应的元素。

属性选择器的用法比较多，以下表格中列举了部分属性选择的用法和作用。

我们仅学习较为常用的三种: [attributeName]、[attributeName=value]、[attributeName~=value]。

4.1.3.1、[attributeName]

[attributeName] 形式的属性选择器用于选择 拥有attributeName属性 的 HTML 元素。

比如对于以下HTML元素来说:

<form action="http://www.baidu.com/s">
<input type="text" name="wd">
<input type="submit" value="百度一下">
</form

  • [type] 可以选择两个 input 元素，因为它们都拥有了 type 属性

  • [type] 无法选择 form 元素，因为 form 元素不拥有 type 属性

使用 [attributeName] 形式的属性选择器选择元素时需注意:

  • 仅关注元素是否拥有指定 attributeName 对应的属性

  • 与属性的属性值无关 ( 即不考虑该属性的属性值 )

4.1.3.2、[attributeName=value]

[attributeName=value] 形式的属性选择器用于选择 拥有指定属性 且 该属性值仅等于指定值 的 HTML 元素。

比如对于以下 HTML 元素来说:

<div class="wrapper first odd"></div>
<div class="wrapper second even"></div>
<div class="wrapper"></div>

使用 [class=wrapper] 可以选择以上三个div元素中的最后一个元素，而不能选择前两个元素。

因为只有最后一个div元素的 class 属性取值等于 wrapper，

另外两个div元素的 class属性中只能说是包含 wrapper 。

所以这里要注意:

采用 [attributeName=value]形式的属性选择器选择HTML元素时，元素的属性值必须是等于指定值。

4.1.3.3、[attributeName~=value]

[attributeName~=value] 形式的属性选择器用于选择 拥有指定属性 且 该属性值包含指定值 的 HTML 元素。

比如对于以下 HTML 元素来说:

<div class="wrapper first odd"></div>
<div class="wrapper second even"></div>
<div class="wrapper"></div>

使用 [class~=wrapper] 选择以上三个div ，此时的 [class~=wrapper] 作用与 .wrapper 是相同的。

4.1.4、ID选择器

4.1.4.1、元素编号

与现实生活中每个人拥有一个唯一的公民身份号码(身份证编号)一样，

在HTML页面上每个元素都应该有一个惟一的编号，浏览器可以通过这个编号来管理该元素。

这个编号就是 元素编号，也称作 元素标识符 ( element identifier )

元素编号可以通过元素的 id 属性来指定:

<div class="wrapper" id="first">
<input type="text" name="wd" id="wd" >
 <input type="submit" value="百度一下" id="button-baidu" >
</div>
​
<div class="wrapper" id="second">
<input type="text" name="q" id="q" >
 <input type="submit" value="360搜索" id="button-360" >
</div>

作为元素标识符，我们应该尽力保证 id 属性取值的惟一性。

4.1.4.2、id selector

id 选择器 也称作 id 选择符，英文中称作 id selector ，其基本用法为:

#elementId {
 
}

其作用是选择页面上 id 属性中 等于 指定值的元素。

4.1.5、通配选择符（universal selector）

在CSS中一个星号(*)就是一个通配选择器，它可以匹配任意类型的HTML元素。

其用法为:

* {
​
}

4.1.6、伪类 ( pseudo-class )

伪类( pseudo-class ) 向某些选择器添加特殊的效果，其基本用法为:

selector:pseudo-class {
property : value ;
}

注意 selector:pseudo-class 中间的 : 前后不可以有任何空白字符。

伪类( :pseudo-class ) 可以表示某个选择器( selector ) 所选择元素的某种状态，比如:

老马:没钱 { }
老马:有钱 { }

其中通过 老马 选择一个或多个人，用 :没钱 和 :有钱 来选择这些人的状态。

在CSS代码中:

.first:hover {
background-color : red ;
}

通过 .first 可以命中页面上所有的 class 属性中包含 first 的元素，

通过紧跟其后的 :hover 可以为这些元素设置当鼠标悬浮时呈现的效果(鼠标悬浮时背景颜色为红色)。

另外需要特别说明一下:

伪类(pseudo-class)需要结合一个已经存在的选择器来使用，比如 .wrapper:hover 。

常用伪类( pseudo-classes ):

  • :link 表示超链接未被访问时的状态

  • :visited 表示超链接被访问后的状态

  • :hover 表示鼠标悬浮到元素上

  • :active 表示超链接处于激活状态

    • 所谓激活状态就是鼠标左键在超链接上按下但未释放时的状态

使用 :link 、:visited 、:hover 、:active 修饰超链接时需要注意:

  • :hover 必须被置于 :link 和 :visited 之后才是有效的

  • :active 必须被置于 :hover 之后，才是有效的

5、优先级

在以下列表中，选择器类型的优先级是递增的：

  • Type Selectors

    • 标记选择器 ( tag selector ) ( 例如 div 、h1 )

    • 伪元素选择器 ( 例如 ::before 、::after）

  • Class Selectors

    • class selector ( 例如 .wrapper )

    • 属性选择器 ( attribute selector )（例如 [type=text]）

    • 伪类选择器（例如 :hover 、：focus ）

  • ID选择器

    • 例如 #first 、#test

以下选择器对优先级没有影响:

  • 通配选择符( universal selector)（ * ）

  • 关系选择符( combinators )

    • 关系选择符包括 + 、> 、~ 、 (空格)、||

  • 否定伪类( negation pseudo-class) ( :not() )

    • 但是，在 :not() 内部声明的选择器会影响优先级

元素的 内联样式 总会覆盖外部样式表的任何样式 ，因此可看作是具有最高的优先级。