关于css:css属性详解第一天

43次阅读

共计 1025 个字符,预计需要花费 3 分钟才能阅读完成。

一、通用选择符的应用
通用选择符 *,它的应用办法切实 css 里间接应用 *{属性名: 值}, 在以后引入了该 css 的页面中,所有元素都会领有该款式属性和值。在理论开发中,通用选择符个别比拟少用!
二、标签选择器的应用
什么是标签选择器,简略点说就是间接用标签名来设置 css 款式,如下根本构造:

<html>
 <body>
   <div>
    <div>
      <p> 这是第一段 </p>
    </div>
     <div>
      <p> 这是第一段 </p>
    </div>
  </div>
</body>
</html>

如果咱们设置 p 元素的字体色彩为红色,那么所有 p 元素的字体将变成红色, 大小将变成 25 像素。

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

上面咱们来给 div 元素设置属性,代码如下:

div{
  width:100px;
  border:10px solid blue;
}

这样一来,咱们将看到页面显示显示出三个宽度为 100 像素并且边框为 10 像素的蓝色长方形。
任何元素都能够设置本人的 css 属性,如果有多个同名元素,应用标签选择器将为所有同名元素设置雷同的属性! 个别在我的项目开发中,咱们须要很审慎的抉择应用标签选择器。
三、id 选择器
id 选择器,应用形式为 #id 名{属性名: 属性值}, 咱们来看下以下构造代码

<html>
<body>
  <div>
   <div>
     <p id="one"> 这是第一段 </p>
   </div>
    <div>
     <p> 这是第一段 </p>
   </div>
 </div>
</body>
</html>
  #one{
    width:1000px;
    background:yellow;
  }

通过以上的属性设置,咱们将在页面看到变动。带有 id=”one” 的 p 元素的宽度为 1000 像素,背景色彩为黄色。而没有带 id=”one” 的 p 元素则没有变动。留神: 在一个文档中,id 名具备唯一性,只能有一个!
四、类选择器
类选择器,应用.csss 名{属性名: 值}, 咱们看看上面这个 构造代码

 <div>
    <div class="two"></div>
    <div> 这是没有 class 属性的 <div>
    <div class="two"> 这是有属性的 </div>
   </div>

通过 css 代码为这个构造增加款式

 div{
  width:300px;
  heigth:300px;
  border:1px solid red;
 }
 .two{background:red;}

当初咱们会发现页面呈现了三个宽高为 300 像素的方框,然而第一个和第三个的背景色彩为红色。因为这两个有 class=”two”, 而第二个没有。

正文完
 0