React学习-css

news2025/4/10 4:02:17

W3Schools Tryit Editor

CSS 教程

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

p {
/* 这是个注释 */   
color:red;
text-align:center;
}

选择器

CSS Id：

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

Class：

.center {text-align:center;}
p.center {text-align:center;}

标签选择器：

<style>
h3{color:red;}
</style>
<h3>W3cschool教程</h3>

通用选择器

通用选择器（*）选择页面上的所有的 HTML 元素。

* {
  text-align: center;
  color: blue;
}

分组选择器

h1, h2, p {
  text-align: center;
  color: red;
}

内联选择器：

<h3 style="color:red;">W3cschool教程</h3>

后代选取器：

匹配所有指定元素的后代元素（子子孙孙）

以下实例选取所有 <p> 元素插入到 <div> 元素中，只要有<p>就会处理到

div p
{
	background-color:yellow;
}

<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>

<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>

子元素选择器：

只能选择作为某元素子元素的元素，

比如：选择了<div>元素中所有直接子元素 <p> ：如果<p>被包了其他元素，则不会受影响

div>p
{
	background-color:yellow;
}
<div>
<h2>我叫唐纳德</h2>
<p>我住在达克堡。</p>
</div>

相邻兄弟选择器：

可选择紧接在另一元素后的元素，且二者有相同父元素。

div+p
{
	background-color:yellow;
}
<div>
<h2>我叫唐纳德</h2>
<p>我住在达克堡。</p>
</div>

<p>我最好的朋友是米奇。</p>

<p>我不是被设计的。</p>

普通相邻兄弟选择器：

选取所有指定元素的后面相邻兄弟元素。

div~p
{
	background-color:yellow;
}
</style>

<p>段落 3。不在 div 中。</p>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>

<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>

`div:first-child和`div :first-child选择器

div:first-child属于组合选择器
既满足是div元素，又满足是父级元素的“第一个孩子”，至于父级元素是谁，无所谓

div :first-child属于后代选择器
必须是div元素的“第一个孩子”，父级元素明确要求是div元素，至于“第一个孩子”是什么元素，无所谓。

其他：

bento .small:not(apple) ：bento .small子元素除了apple

plate:nth-child(4) :plate 第4个子元素

pickle:only-child ： pickle只有一个子元素

apple:first-of-type : apple这类型出现的第一个元素

apple:nth-of-type(odd): app这类型出现的奇数元素，even则为偶数，odd可以为数字，也可以是个算式，比如6n+2

a[href]:选择所有带href的a元素, 还有可以a[href="123"], a[href^="123"], 其中123为值,加上^代表带有123开始的值,a[href$="to"]代表结尾为to的值，a[href*="to"]代表有to值的元素

2.CSS引用

外部样式表

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

mystyle.css文件
hr {color:sienna;}            
p {margin-left:20px;}            
body {background-image:url(/images/back40.gif);}

假如重复定义取的是并集

内部样式表

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

假如重复定义取的是并集

内联样式

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

假如重复定义取的是并集

内联样式表的权值最高 1000
ID 选择器的权值为 100
Class 类选择器的权值为 10
HTML 标签选择器的权值为 1

3.CSS属性

Backgrounds

background-color：定义了元素的背景颜色

h1 {background-color:#6495ed;}
p {background-color:rgb(255,0,0);}
div {background-color:red;}

background-image：描述了元素的背景图像

body  {
    	background-image:url('/statics/images/w3c/intro.png');
        background-repeat:repeat-x; /* repeat-y  no-repeat*/
    	background-color:#cccccc;
}

background-position:改变图像在背景中的位置

body
    {
    	background-image:url('/statics/images/w3c/intro.png');
    	background-repeat:no-repeat;
		/*
		background-position:66% 33%; 一个图像放在水平方向 2/3、垂直方向 1/3 处
        background-position:50px 100px; 在元素内边距区左上角向右 50 像素、向下 100 像素的位置上
		*/
    	background-position:center top;
    	margin-right:200px;
    }

可以简写background

当使用简写属性时，属性值的顺序为：:

background-color
background-image
background-repeat
background-attachment：背景图像是否固定或者随着页面的其余部分滚动。
background-position

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

Text相关

Text Color

h1 {color:#00ff00;}

text-align对齐方式

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
justify：每一行被展开为宽度相等，左，右外边距是对齐

text-decoration文本修饰

用来设置或删除文本的装饰

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

text-transform文本转换

用来指定在一个文本中的大写和小写字母

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

text-indent文本缩进

所有元素的第一行都可以缩进一个给定的长度

p {text-indent:50px;}

word-spacing文本间隔

改变字（单词）之间的标准间隔

p
{
word-spacing:30px;
}

direction指定文本方向/书写方向

div
{
direction:rtl;
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2329886.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！