02_CSS学习

CSS 简介

　　CSS 指层叠样式表 (Cascading Style Sheets)

>>CSS选择器

元素选择符

id 选择器 #para1{text-align:center;}

class 选择器 .center {text-align:center;}
通配选择符 针对所有元素 * {}
类型选择符 h1 {font-size: 20px;}

属性选择器

CSS3在CSS2的基础上对属性选择器进行了扩展，新增了3个属性选择器，使得属性选择器有了通配符的概念，这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器。如下表所示：

实例展示：

html代码：

<a href="xxx.pdf">我链接的是PDF文件</a>
<a href="#" class="icon">我类名是icon</a>
<a href="#" title="我的title是more">我的title是more</a>

css代码

a[class^=icon]{
  background: green;
  color:#fff;
}
a[href$=pdf]{
  background: orange;
  color: #fff;
}
a[title*=more]{
  background: blue;
  color: #fff;
}

关系选择符

包含选择符(E F)

　　E F 选择所有被E元素包含的F元素。
　　与子选择符(E>F) 不同的是，包含选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子

子选择符(E>F)

　　E>F 选择所有作为E元素的子元素F。
　　与包含选择符(E F) 不同的是，子选择符只能命中子元素，而不能命中孙辈。

相邻选择符(E+F)

　　E+F 选择紧贴在E元素之后F元素，元素E与F必须同属一个父级。
　　与兄弟选择符(E~F) 相同的是，相邻选择符也是选择同级的元素F；不同的是，相邻选择符只会命中符合条件的那个毗邻的兄弟元素（即紧挨着E元素之后的第一个F元素）。

兄弟选择符(E~F)

　　E~F 选择E元素后面的所有兄弟元素F，元素E与F必须同属一个父级。
　　需要注意的是，选择的只是同级的元素F，后代中的元素F不会被选择。

伪类选择器

　　root

:root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。

示例演示：

通过“:root”选择器设置背景颜色

HTML代码：

<div>:root选择器的演示</div>

CSS代码：

:root {
  background:orange;
}

　　:not否定选择器

:not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。

　　:empty空选择器

:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

　　:target

:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。

#brand:target {
  background: orange;
  color: #fff;
}

　　:first-child

“:first-child”选择器表示的是选择父元素的第一个子元素的元素E。

ol > li:first-child{
color: red;
}

　　:last-child

“:last-child”选择器选择的是元素的最后一个子元素。

　　:nth-child(n)

“:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。

n的起始值：

ol > li:nth-child(2n){
  background: orange;
}

　　:nth-child(n)

“:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。

　　:first-of-type

“:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。

示例演示：

通过“:first-of-type”选择器，定位div容器中的第一个p元素（p不一定是容器中的第一个子元素），并设置其背景色为橙色。

　　:nth-of-type(n)

“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。

　　:last-of-type

“:last-of-type”选择器和“:first-of-type”选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素。

　　:nth-last-of-type(n)

“:nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的，选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始。

　　:only-child

“:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。

<div class="post">
  <p>我是一个段落</p>
</div>

.post p:only-child {
  background: orange;
}

　　:only-of-type

“:only-of-type”是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。

　　:enabled / :disabled选择器

有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。

input[type="text"]:enabled {
  background: #ccc;
  border: 2px solid red;
}

　　:checked选择器

:checked”表示的是选中状态。

input[type="checkbox"]:checked + span {
  opacity: 1;
}

　　::selection选择器

“::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。

::selection {
  background: red;
  color: green;
}

　　:read-only

“:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’”

input[type="text"]:read-only{
  border-color: #ccc;
}

　　 :read-write

“:read-write”选择器刚好与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式。

　　::before和::after

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。

>>CSS 创建

插入样式表的方法有四种:

链入外部样式表(External style sheet)

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

导入外部样式表
<style>
@import url(my.css)
</style>
内部样式表(Internal style sheet)

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式(Inline style)

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式优先级

　　　　(内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

>>CSS 样式

1. 背景

CSS 属性定义背景效果:

background-color 背景颜色
background-image 背景图片
background-repeat 背景重复
background-attachment 背景滚动
background-position 背景定位

背景颜色

background-color 属性定义了元素的背景颜色.

页面的背景颜色使用在body的选择器中:

　　body {background-color:#b0c4de;}

CSS中，颜色值通常以以下方式定义:

十六进制 - 如："#ff0000"
RGB - 如："rgb(255,0,0)" rgba(255,0,0,0.5) a表示颜色的深度或透明度
颜色名称 - 如："red"

eg:

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

渐变色彩

Gradient 分为线性渐变(linear)和径向渐变(radial)。

eg: background:linear-gradient(to top left,#fff,#999);

参数：

第一个参数:指定渐变方向，可以用“角度”的关键词或“英文”来表示：

第一个参数省略时，默认为“180deg”，等同于“to bottom”。

第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。

background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);

效果图：

背景图像

background-image 属性描述了元素的背景图像.

默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.

　　body {background-image:url('paper.gif');}

背景图像 - 水平或垂直平铺：background-repeat:repeat-x;

背景图像- 设置定位与不平铺：background-repeat:no-repeat;

利用 background-position 属性改变图像在背景中的位置:background-position:right top;

背景- 简写属性：body {background:#ffffff url('img_tree.png') no-repeat right top;}

背景位置 background-origin

设置元素背景图片的原始起始位置。

语法：

　　background-origin ： border-box | padding-box | content-box;

参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。

效果如下：

注：如果背景不是no-repeat，这个属性无效，它会从边框开始显示。

background-clip

用来将背景图片做适当的裁剪以适应实际需要。

语法：

　　background-clip ： border-box | padding-box | content-box | no-clip

参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。

效果如下图所示：

背景图片大小 background-size

设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。

语法：

　　background-size: auto | <长度值> | <百分比> | cover | contain

取值说明：

1、auto：默认值，不改变背景图片的原始高度和宽度；

2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；

3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；

4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；

5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。

2. 边框

　　圆角效果 border-radius

　　border-radius是向元素添加圆角边框。

　　使用方法：

　　border-radius:10px; /* 所有角都使用半径为10px的圆角 */

　　border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */

　　阴影 box-shadow

　　box-shadow是向盒子添加阴影。支持添加一个或者多个。

　　box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

注意：inset 可以写在参数的第一个或最后一个，其它位置是无效的。

为元素设置外阴影：

示例代码：

.box_shadow{
  box-shadow:4px 2px 6px #333333; 
}

效果：

边框应用图片 border-image

background:url(xx.jpg) 10px 20px no-repeat;

3. 字体、文本

文本颜色

颜色是通过CSS最经常的指定：

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red

　　eg：body {color:red;} h1 {color:#00ff00;} h2 {color:rgb(255,0,0);}

文本的对齐方式

文本排列属性是用来设置文本的水平对齐方式。

text-align:center 居中

text-align:right 对齐到左或右

text-align:justify 两端对齐.

当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

文本修饰

text-decoration 属性用来设置或删除文本的装饰。

从设计的角度看 text-decoration属性主要是用来删除链接的下划线：

text-decoration:overline 上划线

text-decoration:line-through 删除线

text-decoration:underline 下划线

文本转换

文本转换属性是用来指定在一个文本中的大写和小写字母。

可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

　　eg：p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;}

文本缩进

文本缩进属性是用来指定文本的第一行的缩进。

　　eg：p {text-indent:50px;}

文本阴影

text-shadow可以用来设置文本的阴影效果。

语法：

　　text-shadow: X-Offset Y-Offset blur color;

X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；

Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移；

Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；

Color：是指阴影的颜色，其可以使用rgba色。

　　eg：h1 { text-shadow: 5px 5px 5px #FF0000; }

省略标记 text-overflow 与 word-wrap

text-overflow用来设置是否使用一个省略标记（...）标示对象内文本的溢出。

语法：

但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果，代码如下：

text-overflow:ellipsis; 
overflow:hidden; 
white-space:nowrap;

同时，word-wrap也可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行。

语法：

normal为浏览器默认值，break-word设置在长单词或 URL地址内部进行换行，此属性不常用，用浏览器默认值即可。

嵌入字体@font-face

@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。

语法：

@font-face {
    font-family : 字体名称;
    src : 字体文件在服务器上的相对或绝对路径;
}

这样设置之后，就可以像使用普通字体一样在（font-*）中设置字体样式。

比如：

p {
    font-size :12px;
    font-family : "My Font";
    /*必须项，设置@font-face中font-family同样的值*/
}

4. 链接

伪类
a:visited{} 已访问过链接的状态
a:link{} 未访问过链接的状态
a:hover{} 鼠标悬停到链接上的状态
a:active{} 被激活的链接状态

5. 列表

6. 表格

posted @ 2018-05-29 10:56 樱花落&浅暮雪阅读(179) 评论(0) 收藏举报

刷新页面返回顶部

樱花落&浅暮雪

02_CSS学习

CSS 简介

>>CSS选择器

元素选择符

属性选择器

关系选择符

伪类选择器

root

:not否定选择器

:empty空选择器

:target

:first-child

:last-child

:nth-child(n)

:nth-child(n)

:first-of-type

:nth-of-type(n)

:last-of-type

:nth-last-of-type(n)

:only-child

:only-of-type

:enabled / :disabled选择器

:checked选择器

::selection选择器

:read-only

:read-write

::before和::after

>>CSS 创建

>>CSS 样式

1. 背景

背景颜色

渐变色彩

背景图像

背景位置 background-origin

background-clip

背景图片大小 background-size

2. 边框

圆角效果 border-radius

阴影 box-shadow

边框应用图片 border-image

3. 字体、文本

文本颜色

文本的对齐方式

文本修饰

文本转换

文本缩进

文本阴影

省略标记 text-overflow 与 word-wrap

嵌入字体@font-face

4. 链接

5. 列表

6. 表格

公告

　　root

　　:not否定选择器

　　:empty空选择器

　　:target

　　:first-child

　　:last-child

　　:nth-child(n)

　　:nth-child(n)

　　:first-of-type

　　:nth-of-type(n)

　　:last-of-type

　　:nth-last-of-type(n)

　　:only-child

　　:only-of-type

　　:enabled / :disabled选择器

　　:checked选择器

　　::selection选择器

　　:read-only

　　 :read-write

　　::before和::after

　　圆角效果 border-radius

　　阴影 box-shadow