Robot Framework (十一) css基础

　　<head>

　　　　span{
　　　　color:blue;
　　　　}
　　　　</style>
　　</head>

CSS代码语法

css 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：

选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。

声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下所示：

p{font-size:12px;color:red;}

注意：

1、最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。

2、为了使用样式更加容易阅读，可以将每条代码写在一个新行内，如下所示：

p{
   font-size:12px;
   color:red;
}


CSS代码注释

就像在Html的注释一样，在CSS中也有注释语句：用/*注释语句*/来标明（Html中使用)。就像下面代码：



CSS样式可以写在哪些地方呢？从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。

1.内联式css样式，直接写在现有的HTML标签中


　　内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：

　　　<p style="color:red">这里文字是红色。</p>

2.嵌入式css样式，写在当前的文件中
　　嵌入式css样式，就是可以把css样式代码写在<style type="text/css"></style>标签之间。如下面代码实现把三个<span>标签中的文字设置为红色：
　　<style type="text/css">

　　　　span{
　　　　color:red;
　　　　}
　　</style>

　　　　嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。

　3.外部式css样式，写在单独的一个文件中

　　外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：

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

4.三种方法的优先级

　　内联式 > 嵌入式 > 外部式

　　但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。例如：

　　<head>

　　　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
　　　　<title>嵌入式css样式</title>
　　　　<link href="style.css" rel="stylesheet" type="text/css">
　　　　<style type="text/css">
　　　　span{
　　　　color:red;
　　　　}
　　　　</style>
　　</head>

CSS的选择器：标签选择器、类选择器、ID选择器

　1.类选择器

　　语法：

　　.类选器名称{css样式代码;}（要写在<style>标签里）

　1.ID选择器

　　语法：

　　#ID名称{css样式代码;}（要写在style标签里）

子选择器

还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码：

.food>li{border:1px solid red;} (放在<style>标签里）

这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。

通用选择器

通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：

* {color:red;}

伪类选择符

更有趣的是伪类选择符，为什么叫做伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：

a:hover{color:red;}

上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。这样就会使第一段文字内容中的“胆小如鼠”文字加入鼠标滑过字体颜色变为红色特效。

元素分类

在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

常用的块状元素有：

常用的内联元素有：

常用的内联块状元素有：

元素分类--块级元素

什么是块级元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。

a{display:block;}

块级元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

元素分类--内联元素

在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。

 div{
     display:inline;
 }

......

<div>我要变成内联元素</div>

内联元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

元素分类--内联块状元素

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。

inline-block 元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

css布局模型

清楚了CSS 盒模型的基本概念、盒模型类型，我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、最核心的概念。但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本，那么 CSS 布局模板就是末了，是外在的表现形式。
CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。
在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）

posted @ 2018-09-06 16:23 天天天蓝蓝调调阅读(374) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

天天天蓝蓝调调