CSS1

来源：互联网发布：数据方舟产品编辑：程序博客网时间：2024/05/16 07:16

学习CSS之前要对HTML有个基础的了解
CSS样式主要用于改变HTML内容在浏览器里显示的样式，如字体、颜色等，CSS样式可以让不同网页位置的文

字有统一的字体、字号或者颜色等
1.基本：
   <head>
      <style type="text/css">
          p{
   font-size:12px;/*设置文字字号*/

               color:red;/*设置文字颜色*/

                font-weight:bold;/*设
置字体加粗*/

}
      </style>
   </head>
    CSS样式在<head><head/>里面编辑，同时注意<style type="text/css">不可少
   运用CSS样式在<body></body>里面运用如下：
    <body>

       <p>
           你好，世界
       </p>

</body>
//其中'你好，世界'则运用CSS样式
2.CSS样式有多条声明的时候，用分号隔开；例如
p{font-size:12px;color:red;}
3.CSS样式用/*注释语句*/来注释
4.CSS样式代码插入有三个方式：内联式、嵌入式和外部式
   内联式：<p style="color:red">文字为红色的</p>//样式代码要写在style=“”双引号中
   嵌入式：<style type="text/css">
            span{
               color:red;
                }
            </style>
   外部式：把CSS代码写在一个单独的外部文件中，这个样式文件以“.css”为扩展名，在<head>里

越近优先级别越高
6.类选择器：.类选择器名称{css样式代码;}   如.stress{color:red}
            使用class="类选择器名称"为标签设置一个类   如<span class="stress">你好</span>
            //可以多次使用
7.ID选择器：#setGreen{
              color:green;
            }
            <span id="setGreen">你好</span>
            为标签设置id="ID名称"，而不是class="类名称"。
            ID选择符的前面是井号（#）号，而不是英文圆点（.）。
            //仅可以使用一次

8. .stress{
      color:red;
    }
    .bigsize{
      font-size:25px;
    }
<p>到了<span class="stress bigsize">三年级</span>下学期</p>
   类选择器可以叠加使用
   但是ID选择器不可以如上使用只能单独使用
9.子选择器
   .food>li{border:1px solid red;}//这行代码会使class名为food类下的子元素li加入红色实线边框，

如下：
    <ul class="food">
       <li>水果
       </li>
    </ul> 即为类class小的li增加了红框

10.包含选择器
空格作用于元素所有后代

对比上两图即可知道区别所在

0 0