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、边框阴影

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

实例：

  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; 
}

水平阴影，垂直阴影，模糊的距离，以及阴影的颜色：
```
div {
 box-shadow: 10px 10px 5px grey;
}
```

在 ::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;
}

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 属性值的书写顺序:

粗细 ( width )
风格 ( style )
颜色 ( 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 属性值的书写顺序:

粗细 ( width )
风格 ( style )
颜色 ( 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 属性值的书写顺序:

粗细 ( width )
风格 ( style )
颜色 ( 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 属性值的书写顺序:

粗细 ( width )
风格 ( style )
颜色 ( 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 属性值的书写顺序:

粗细 ( width )
风格 ( style )
颜色 ( 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() 内部声明的选择器会影响优先级

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

css属性、样式、边框、选择器的更多相关文章

【css学习整理】css基础(样式,语法,选择器)
CSS是什么? cascading 层叠样式表 sheet 样式文件 style 外观个性化 CSS语法? 声明方法: 选择器(属性: 值; 属性: 值) 选择器: 通过名称制定对哪些标签进行样式设置 ...
点赞功能实现 $(tag).css('属性', '样式')
1. 创建标签 document.createElement() 2.$(tag).css('属性', 样式) 赋予标签属性样式 3.设置定时器改变位置大小 <!DOCTYPE html&g ...
如何确定要对DIV设置什么CSS属性样式呢？
设置什么CSS样式不是凭空想象的而是有参考的,一般分三种情况下得到需要知道设置什么样式. 第一种:没有美工图,自己边思考布局这种没有美工图也没有可参考的情况下DIV CSS布局,根据自己实际构思的想 ...
CSS属性（边框）
1.边框 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="U ...
4 CSS导航栏&下拉菜单&属性选择器&属性和值选择器
CSS导航栏熟练使用导航栏,对于任何网站都非常重要使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单垂直导航栏: <!DOCTYPE html> <html> & ...
前端入门4-CSS属性样式表
本篇文章已授权微信公众号 dasu_Android(大苏)独家发布声明本系列文章内容全部梳理自以下四个来源: <HTML5权威指南> <JavaScript权威指南> MD ...
《Head First HTML与CSS》的CSS属性
关于继承的结论. 1.元素选择器的作用强于继承的作用:用户定义强于浏览器默认(详见(3)<Head First HTML与CSS>学习笔记---CSS入门的2) 2.基于类的选择器> ...
from表单、css选择器、css组合器、字体样式、背景属性、边框设置、display设置
目录一.form表单 1.form表单功能 2.表单使用原理二.前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2. ...
{前端CSS} 语法 Css的几种引入方式 css选择器选择器的优先级 CSS属性相关背景属性边框 CSS盒子模型清除浮动 overflow溢出属性　　定位（position）z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

随机推荐

30 HashSet
/* * 使用HashSet存储字符串并遍历 * * Set的特点: * 无序(存储和读取的顺序可能不一样) * 不允许重复 * 没有整数索引于List正好相反 */ public class Ha ...
查看jdk 线程日志
命令:jstack(查看线程).jmap(查看内存)和jstat(性能分析)命令这些命令必须在 linux jdk bin 路径下执行 eq: ./jstack 10303 即可如果想把 ...
正则表达式（JS表格简要总结）
1. JS中正则表达式定义 JavaScript 中的正则表达式用 RegExp 对象表示. JS中定义正则表达式的两种方法: 方法示例 RegExp 对象 var pattern = new Re ...
动态网页D-html
BOM(Browser Object Model)浏览器对象模型 window对象(window – 代表浏览器中打开的一个窗口) 1.alert()方法 – 定义一个消息对话框 window.ale ...
今天整理了几个在使用python进行数据分析的常用小技巧、命令。
提高Python数据分析速度的八个小技巧 01 使用Pandas Profiling预览数据这个神器我们在之前的文章中就详细讲过,使用Pandas Profiling可以在进行数据分析之前对数据进行 ...
你知道什么是 GitHub Action 么？
本文是 GitHub Action 的入门教程,如您已有相关使用经验可以直接关掉. GitHub Action 是 GitHub 于 2018 年 10 月推出的一个 CI\CD 服务. 之前一直都是 ...
Ubuntu下的eclipse配置MapReduce
下载配置文件: 链接:https://pan.baidu.com/s/13vatPHpDP5HaW0mKuHydUA提取码:pjxi 1)启动hadoop cd /usr/local/hadoop . ...
算法笔记刷题4（PAT B1009)
这一题本来不应该有什么问题的,我很快写出来了,在dev c++里面运行也正常.但是放到pat以后出现了问题.更换了c/c++都不行通过编译. #include <cstdio> #incl ...
20199326《Linux内核原理与分析》第十一周作业
Shellsock攻击实验实验背景 2014年9月24日,Bash中发现了一个严重漏洞shellshock,该漏洞可用于许多系统,并且既可以远程也可以在本地触发. Shellshock,又称Bash ...
Oracle 11g 精简客户端
通常开发人员会装上一个 oracle客户端,但一般不会在自己的机器上安装Oracle database Oracle 客户端安装体积很大,但是装上去了基本上就用2个功能:TNS配置服务名和sqlplu ...

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

CSS