RN3_CSS学习(react native 学习)

最新推荐文章于 2024-09-10 08:57:34 发布

huhanghao

最新推荐文章于 2024-09-10 08:57:34 发布

阅读量2.2k

点赞数

分类专栏： react native学习之路文章标签： css

本文链接：https://blog.csdn.net/u011486491/article/details/54706469

版权

react native学习之路专栏收录该内容

26 篇文章 0 订阅

订阅专栏

RN3_CSS学习

基础概念和简介

简介：

CSS 指层叠样式表 (Cascading Style Sheets)，样式定义如何显示 HTML 元素，通常存储在样式表中，把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题，外部样式表可以极大提高工作效率，外部样式表通常存储在 CSS 文件中，多个样式定义可层叠为一。

作用：

HTML 标签原本被设计为用于定义文档内容，如下实例：

<h1>这是一个标题</h1>

<p>这是一个段落.</p>

样式表定义如何显示 HTML元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。

语法规则：

组成

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

l 选择器通常是您需要改变样式的 HTML 元素。

l 每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（styleattribute）。每个属性有一个值。属性和值被冒号分开。

分隔符

CSS声明总是以分号(;)结束，声明组以大括号({})括起来:

p{color:red;text-align:center;}

格式：

为了让CSS可读性更强，你可以每行只描述一个属性:

p
{
color:red;
text-align:center;
}

注释：

CSS注释以 "/*" 开始, 以 "*/" 结束。

CSS的引入方式

插入方式：

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

1. 外部样式表

2. 内部样式表

3. 内联样式

外部样式表

应用场景：

样式需要应用于很多页面时，外部样式表将是理想的选择。

使用方式

每个页面使用<link> 标签链接到样式表。<link> 标签在（文档的）头部：

浏览器会从文件mystyle.css中读到样式声明，并根据它来格式文档。

内部样式表

应用场景：

当单个文档需要特殊的样式时，就应该使用内部样式表。

使用方式

你可以使用 <style>标签在文档头部定义内部样式表。

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

内联样式

应用场景：

要将表现和内容混杂在一起，内联样式会损失掉样式表的许优势。（请慎用这种方法）。

使用方式

在相关的标签内使用样式（style）属性

<pstyle="color:sienna;margin-left:20px">This is aparagraph.</p>

多重样式的优先权

1. 外部样式表

2. 内部样式表（位于 <head>标签内部）

3. 内联样式（在 HTML 元素内部）

内联样式（在 HTML 元素内部）拥有最高的优先权

基本语法

Id 和 Class

要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。

ID选择器

为标有特定 id的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#"来定义。

#para1
{
text-align:center;
color:red;
}

class 选择器

用于描述一组元素的样式，选择器以一个点"."号显示

.center

{

text-align:center;

}

<body>

<h1class="center">标题居中</h1>

<pclass="center">段落居中。</p>

</body>

</html>

注意：class 和ID属性不要以数字开头

Css背景

背景的属性：

l background-color

l background-image

l background-repeat

l background-attachment

l background-position

background-color

定义了元素的背景颜色。

body{background-color:#b0c4de;}

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

l 十六进制-如："#ff0000"

l RGB- 如："rgb(255,0,0)"

l 颜色名称-如："red"

background-image

描述了元素的背景图像。

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

background-repeat

背景平铺方式。

repeat-x：水平平铺。

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

background-position

背景图像的起始位置。

body{background:#ffffff url('img_tree.png') no-repeat right top;}

Csst文本格式

文本基本属性

l 文本颜色

l 文本的对齐方式

l 文本修饰

l 文本转换

l 文本缩进

文本颜色

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

文本的对齐方式

h1{text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

文本修饰

a{text-decoration:none;}

h1{text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}

文本转换

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

文本缩进

p{text-indent:50px;}

css链接

不同的链接可以有不同的样式。可以用任何CSS属性（如颜色，字体，背景等）。特别的链接，可以有不同的样式，这取决于他们是什么状态。

链接状态：

l a:link -正常，未访问过的链接

l a:visited- 用户已访问过的链接

l a:hover- 当用户鼠标放在链接上时

l a:active- 链接被点击的那一刻

a:link{color:#FF0000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */

这里的link，visited，hover，active也可以当做事件来玩

.dropdown:hover.dropdown-content {

display: block;

}

对于设置了dropdown类的属性，在鼠标移动的时候显示（算是一个过滤条件）。

列表

属性作用

1. 设置不同的列表项标记为有序列表

2. 设置不同的列表项标记为无序列表

3. 设置列表项标记为图像

不同的列表项标记

ul.a{list-style-type:circle;}

ul.b{list-style-type:square;}

ol.c{list-style-type:upper-roman;}

ol.d{list-style-type:lower-alpha;}

ul{list-style-image: url('sqpurple.gif');} 图片标记

表格

常用属性：

l 表格边框

l 折叠边框

l 表格宽度和高度

l 表格文字对齐

l 表格填充

l 表格颜色

表格边框

table, th, td
{
border: 1px solid black;
}

折叠边框

table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}

表格宽度和高度

table
{
width:100%;
}
th
{
height:50px;
}

表格文字对齐

td
{
text-align:right;
}

表格填充

td
{
padding:15px;
}

表格颜色

table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}

盒子模型：

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

边框

常用边框属相

l 边框样式

l 边框宽度

l 边框颜色

l 单独设置各边

边框样式

边框宽度

p.one{border-style:solid;

border-width:5px;}

p.two{border-style:solid;

border-width:medium;}

边框颜色：

l name - 指定颜色的名称，如 "red"

l RGB - 指定 RGB 值, 如 "rgb(255,0,0)"

l Hex - 指定16进制值, 如 "#ff0000"

单独设置各边

p{border-top-style:dotted;

border-right-style:solid;

border-bottom-style:dotted;

border-left-style:solid;}

轮廓

绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。CSSoutline 属性规定元素轮廓的样式、颜色和宽度。

Margin(外边距)

单边外边距属性

margin-top:100px;

margin-bottom:100px;

margin-right:50px;

margin-left:50px;

简写属性

margin:25px 50px 75px 100px;

l 上边距为25px

l 右边距为50px

l 下边距为75px

l 左边距为100px

margin:25px 50px 75px;

l 上边距为25px

l 左右边距为50px

l 下边距为75px

margin:25px 50px;

l 上下边距为25px

l 左右边距为50px

margin:25px;

l 所有的4个边距都是25px

Padding（填充）

和margin的机制一个尿性，不赘述

分组和嵌套选择器

分组：

h1,h2,p
{
color:green;
}

几个属性的style被并作一个组。

嵌套选择器

适用于选择器内部的选择器的样式。

p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}

l 为所有p元素指定一个样式

l 为所有class="marked"的元素指定一个样式

l 为所有class="marked"元素内的p元素指定一个样式

Display(显示)

隐藏元素

可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

h1.hidden {visibility:hidden;}

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

h1.hidden{display:none;}

块和内联元素

块元素是一个元素，占用了全部宽度，在前后都是换行符。

块元素的例子：

l <h1>

l <p>

l <div>

内联元素只需要必要的宽度，不强制换行。

内联元素的例子：

l <span>

l <a>

改变一个元素显示

把列表项显示为内联元素：

li {display:inline;}

下面的示例把span元素作为块元素：

span {display:block;}

Positioning(定位)

许你为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。

四种不同的定位方法

l Static 定位

l Fixed 定位

l Relative 定位

l Absolute 定位

Static 定位

HTML元素的默认值，即没有定位，元素出现在正常的流中。

静态定位的元素不会受到top, bottom, left, right影响。

Fixed 定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动：

p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}

Relative 定位

相对定位元素的定位是相对其正常位置。

h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}

Absolute 定位

元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:

h2
{
position:absolute;
left:100px;
top:150px;
}

重叠的元素

img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

背景图片是重叠在最下层。

Float(浮动)

会使元素向左或向右移动，其周围的元素也会重新排列。往往是用于图像，但它在布局时一样非常有用。

规则：

l 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

l 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

l 浮动元素之后的元素将围绕它。

l 浮动元素之前的元素将不会受到影响。

.thumbnail{float:left;

width:110px;

height:90px;

margin:5px;}

清除浮动

指定元素两侧不能出现浮动元素。

.text_line{clear:both;}

组合选择符

合选择符说明了两个选择器直接的关系。

四种组合方式:

后代选取器(以空格分隔)

子元素选择器(以大于号分隔）

相邻兄弟选择器（以加号分隔）

普通兄弟选择器（以破折号分隔）

后代选取器

divp{background-color:yellow;}

所有插入到div中的p背景设为黄色。

子元素选择器

div>p{background-color:yellow;}

<div>元素中所有直接子元素 <p> ，就是外面包了其他元素的都不算直接。

相邻兄弟选择器

div+p{background-color:yellow;}

选取了所有位于 <div>元素后的第一个 <p>元素。就是要和div直接相连的p，中间有其他元素间隔开都不行。

普通相邻兄弟选择器

div~p{background-color:yellow;}

所有 <div>元素的所有相邻兄弟元素 <p> :，比相邻居兄弟的条件放开了一些。

<div>

</div>

段落4也算进去。如果是相邻兄弟的话段落4就不能算。

属性选择器和值选择器

具有特定属性的HTML元素样式不仅仅是class和id。我们还可以针对某一属性的某一类值进行对应的显示。

属性选择器

[title]{color:blue;}

把包含标题（title）的所有元素变为蓝色

属性和值选择器

[title=runoob]{border:5pxsolidgreen;}

改变了标题title='runoob'元素的边框样式

属性和值的选择器 - 多值

[title~=hello]{color:blue;}

包含指定值的title属性的元素样式的例子，使用（~）分隔属性和值

[lang|=en]{color:blue;}

包含指定值的lang属性的元素样式的例子，使用（|）分隔属性和值:

<body>

<plang="en">Hello!</p>

<plang="en-us">Hi!</p>

<plang="en-gb">Ello!</p>

<hr>

<plang="us">Hi!</p>

<plang="no">Hei!</p>

</body>

huhanghao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

RN3_CSS学习(react native 学习)

基础概念和简介

简介：

作用：

语法规则：

组成

分隔符

格式：

注释：

CSS的引入方式

插入方式：

外部样式表

应用场景：

使用方式

内部样式表

应用场景：

使用方式

内联样式

应用场景：

使用方式

多重样式的优先权

基本语法

Id 和 Class

ID选择器

class 选择器

Css背景

背景的属性：

background-color

background-image

background-repeat

background-position

Csst文本格式

文本基本属性

文本颜色

文本的对齐方式

文本修饰

文本转换

文本缩进

css链接

链接状态：

列表

属性作用

不同的列表项标记

表格

常用属性：

表格边框

折叠边框

表格宽度和高度

表格文字对齐

表格填充

表格颜色

盒子模型：

边框

常用边框属相

边框样式

边框宽度

边框颜色：

单独设置各边

轮廓

Margin(外边距)

单边外边距属性

简写属性

Padding（填充）

分组 和 嵌套 选择器

分组：

嵌套选择器

Display(显示)

隐藏元素

块和内联元素

改变一个元素显示

Positioning(定位)

四种不同的定位方法

Static 定位

Fixed 定位

Relative 定位

Absolute 定位

重叠的元素

Float(浮动)

规则：

清除浮动

分组和嵌套选择器