1_36_CSS基础学习_1016

最新推荐文章于 2023-02-01 20:01:28 发布

HPL_222

最新推荐文章于 2023-02-01 20:01:28 发布

阅读量162

点赞数

文章标签： IT HTML5

本文链接：https://blog.csdn.net/HPL_222/article/details/102595591

版权

CSS 语法由三部分构成：选择器、属性和值。

> selector { property1: value1; property2:value2; }  
> P{ Text-align :
> center; 
> Color:red; 
> Background-color: 
> greenyellow; }

**•选择器（selector）**是指给页面的哪个或哪些元素定义样式，通常是希望定义样式的元素标签。
**•属性（property）**是定义的具体样式（如颜色、字体等），每个属性都有一个值，属性和值用冒号隔开，并用大括号括起来。
**•属性和值组成样式声明（declaration）**可以定义多个声明，多个声明之间用分号隔开。
•当有多个声明时，建议在每行只描述一个声明，这样可以增强样式的可读性，如：

p {text-align: center;color: black;font-family: arial;}
p {
  text-align: center;
  color: black;
  font-family: arial;
}

CSS常用选择器

1.元素选择器
元素选择器就是元素自身，定义时直接使用元素标签名称。如定义段落样式，可以选择p元素的名称，即把p作为选择器。例如：

p,h1,form ,table,html, table{color:green;} 
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html{
            background-color: yellow;/*背景颜色*/
}
h1{
            background-color: greenyellow;
            color: red;   /*字体颜色*/
font-size: 50px;/*字体大小*/
font-family: 微软雅黑; /*字体类型*/
}
h2{
            background-color: greenyellow;
            color: red;
        }
p{
            background-color: greenyellow;
            color: red;
        }
</style>
</head>
<body>
这是body内的文字
<h1>这是标题1文字</h1>

2.通用选择器
•通用选择器是一种特殊的选择器，用“”表示，CSS中的通用选择器与Windows通配符“”具有相似的功能，可以定义所有元素的样式。如：
•{font-size:12px; /<定义文档中所有字体大小为12像素>*/}
•上面的样式将会影响文档中所有元素，即文档中所有字体大小都被定义为12像素。使用通用选择器时要慎重，一般常用于定义文档中各种元素的共同属性，如字号、字体等。

3.分组选择器
•可以对选择器进行分组，被分组的选择器就可以共享相同的声明。用逗号将需要分组的选择器隔开。
•下面的例子中，对所有的标题元素进行了分组，所有的标题元素都是绿色的。
h1,h2,h3,h4,h5,h6{color:green;}

4.包含选择器
包含选择器是根据元素在其位置的上下文关系来定义样式，也称后代选择器。如在下面代码中，希望列表中的strong元素变为斜体字，而不是默认的粗体字。

<p><strong>粗体字</strong></p> 
<ol> 
  <li><strong>斜体字</strong></li> 
  <li>正常字体</li> 
</ol>

可以定义如下派生选择器，这样只有li元素中的strong元素样式为斜体字。
li strong{font-style:italic;font-weight:normal;}

5.id选择器（精确定位）
•id选择器使用元素的id属性值为元素指定样式，id选择器必须在元素的id属性值前加“#”。如:
#red{color:red;}
#green{color:green;}
•在下面的HTML代码中，id属性为red的p元素显示为红色，而id属性为green的p元素显示为绿色

这个段落是红色。

这个段落是绿色。

•id选择器常用于建立包含选择器。例如： #sidebar p{font-style:italic;text-align:right;}

6.类选择器
•类名的第一个字符不能使用数字！它无法在Mozilla或Firefox中起作用。
•和id选择器一样，类选择器也常常被用作派生选择器。例如：
.one td{color:#f60;background:#666;}
类名为one的元素内部的表格单元格都会以灰色背景显示橙色文字

7.子元素选择器
•子元素选择器只能选择作为某元素的子元素声明样式，子选择器使用“>”号。
•如希望选择只作为h1元素的子元素strong，可以这样写：
h1>strong{color:red;}
•这个规则会把下面代码中第一个h1下面的strong元素变为红色，但是第二个strong不受影响。

<h1>这是<strong>非常</strong>重要的</h1> 
<h1>这个<em>已经<strong>非常</strong></em>重要了</h1>

8.小总结：
1.元素选择器 html{}
2.统配符选择器 *
3.分组选择器 h1，h2{}
4.包含选择器 li strong {}
5.id 选择器 #id_name{}
6.类选择器 .class{}
7.子元素选择器 h1 > strong{}

注意： 4和7的区别：子元素选择器只对子元素起作用 ，而包含选择器对包含在里面的子元素和子孙元素都起作用。

内嵌方式指的是将CSS规则混合在HTML标签中使用的方式。
CSS规则作为HTML标签的style属性值。
例如：

<a style=“font-family:黑体;font-style:italic;font-size:16pt;color:red”>

这是使用样式的超级链接，

</a>

内嵌样式只对其所在的标签起作用，其它的同类标签不受影响。

HPL_222

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1_36_CSS基础学习_1016

CSS 语法由三部分构成：选择器、属性和值。> selector { property1: value1; property2:value2; } > P{ Text-align :> center; > Color:red; > Background-color: > greenyellow; }**•选择器（selector）**是指给页面...
复制链接

扫一扫