css属性详解(第一天)

Posted 心诚则灵

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css属性详解(第一天)相关的知识,希望对你有一定的参考价值。

一、通用选择符的使用
通用选择符*,它的使用方法实在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",而第二个没有。

以上是关于css属性详解(第一天)的主要内容,如果未能解决你的问题,请参考以下文章

02_HTML5+CSS详解第一天

sass 第一天

javaweb实训第一天上午——HTML和CSS

CSS透明属性详解代码_CSS/HTML

Vue实战-第一天开发工具的使用

CSS3圆角详解第一辑