简单总结css简介,css语法,选择器,伪类和伪元素,样式继承,像素百分比以及颜色单位

css简介

css用来设置网页中元素的样式。
分为三种使用方式
1.在标签内部用style设置。这种称为内联样式(行内样式)。如:

<p style="color:red;">css简介<p>

2.在head中用style(内部样式表).使用时要先写选择器。通过css的选择器来选中元素。可以同时为多个标签设置,内部样式表更加方便对样式进行复用,但内部样式表只能对当前页面生效
3.在外部的css文件中编写css样式(外部样式表)css文件中的写法就是style标签里的写法。通过link标签(写在head标签中)来引入外部的css文件。此样式的好处是编写到外部的css中,可以用浏览器的缓存机制,加快网页的加载速度。

<link rel="stylesheet" href="./style.css">

css语法

style内部已经不是html的区域
/* */是css的注释,ctrl+/是快捷键,在有注释的时候按ctrl+/会取消注释。
选择器 声明块
选择器用来选择页面中的指定元素。如p选中所有p元素。
声明块来指定元素设置的样式,声明块由一个个声明组成
声明块是名值对结构一个样式名对应一个样式值,名值之间用:连接 ;结尾。

选择器

基本选择器

元素选择器:
根据标签名来选中指定的元素 语法: 标签名{}
such as p{}
id选择器:
根据元素的id属性选中一个元素 语法: #id属性值{}
such as #box{}
类选择器:
class是html标签中标签的属性,和id类似,但class可以重复,可以通过class来分组。一个标签可以有多个class,用空格隔开。
如p class="supeer sheep" 既是super的也是sheep的。
作用:根据元素的class属性选中一组元素
语法:.class属性
通配选择器:
作用:选中页面中所有元素
语法: *{}

复合选择器

交集选择器:
作用:选中同时复合多个条件的元素
语法:选择器1选择器2选择器3选择器n{}
注:交集选择器如果有多个元素选择器,必须使用元素选择器开头
并集选择器:
作用:同时选择多个选择器对应的元素
语法: 选择器1,选择器2(逗号就是||)
such as:div,span,#b1,.class{}

关系选择器

父元素——直接包含子元素的元素叫父元素
子元素——直接被父元素包含的元素是子元素
祖先元素——直接或间接包含后代的元素叫祖先元素
后代元素——直接或间接被祖先包含的元素叫做后代元素,子元素也是后代元素
兄弟元素——拥有相同父元素的是兄弟元素
子元素选择器,指定选中父元素的指定子元素
语法:父元素>子元素 div>span{color:red;}(可以无限使用)

div>p>span{
     color: red;
}

后代元素选择器——选中指定元素的后代元素
语法 祖先 后代
such as div span{}
兄弟元素选择器——选择下一个兄弟
语法:前一个 + 下一个
div+span 表示p下面的下一个(只能是第一个)span元素,而且必须紧紧挨着。
p~h1 表示选择下面所有的h1元素(都是选下面的,前边的span不会被选中)

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div+span{
            color: yellow;
        }
        p~h1{
            color: red;
        }
    </style>
</head>
<body>
    <h1>QAQ</h1>
    <!--这个h1不会变色  -->
    <div></div>
    <p>:(</p>
    <span>:)</span>
    <!-- 这时span不会变色 -->
    <div></div>
    <span>:)</span>
    <p>:(</p>
    <!-- 这时span就会变黄色 -->
    <h1>OVO</h1>
    <!-- 这个h1会变色 -->
</body>
</html>

属性选择器

这里补充一个html的属性title,当光标移动到niu上,光标旁会出现abc。

<p title="abc">niu<p>

用法:
[属性名]选择含有指定属性的元素
[属性名=属性值]选择含有指定属性的属性值的元素
[属性名^=属性值]选择属性值以指定值开头的元素
[属性名$=属性值]选择属性值以指定值结尾的元素
[属性名*=属性值]选择属性值中含有某值的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
       [title="all"]{color: red;}
       [title^="abc"]{color:yellow ;}
       [title$="ghi"]{color: green;}
       [title*="def"]{color: blue;} 
    </style>
</head>
<body>
   <div title="all">all</div>
   <div title="abccccccc">abccc</div>
   <div title="ggghi">gghi</div>
   <div title="aaadefg">aaadefg</div>
</body>
</html>

伪类和伪元素

伪类

伪类是用来描述一个元素的特殊状态 such as 第一个子元素,被点击的元素等等
语法: 伪类用:开头
用法:ul>li:first-child{}(还有last-child nth-child(3)(第三个子元素))
补充快捷键:ul>li生成ul和li,ul>li*5,生成5个li
nth-child的特殊值:
写n会全选
2n或者even选中偶数位的(第一个数是1)
2n+1或者odd表示奇数位的
以上的伪类是根据子元素进行排序的

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
       ul>li:first-child{color: red;}
    </style>
</head>
<body>
   <ul>
       <li>:)</li>
       <!-- ul下面的li并且li是第一个子元素,所以变红色 -->
   </ul>
   <ul>
       <span>:)</span>
       <li>:(</li>
       <!-- 虽然li是ul的子元素但是是第二个子元素,所以不会变色 -->
   </ul>
</body>
</html>

:first-of-type,:last-of-type,nth-of-type
这几个的不同点是在同类型中进行排序

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
       ul>li:first-of-type{color: red;}
       /* 是ul中的第一个li元素,所以下面两个li都可以变色 */
    </style>
</head>
<body>
   <ul>
       <li>:)</li>
   </ul>
   <ul>
       <span>:)</span>
       <li>:(</li>
   </ul>
</body>
</html>

:not 否定伪类 将符合条件的元素从选择器中去除
如:ul>li:not(nth-child(3))){}

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
       ul>li:not(:first-of-type){color: red;}
       /* 是ul中的第一个li元素,所以下面两个li都可以变色 */
    </style>
</head>
<body>
   <ul>
       <li>QAQ</li>
       <li>OVO</li>
       <li>TAT</li>
       <li>0.0</li>
       <!-- 除第一个QAQ以外其余都变红色 -->
   </ul>
</body>
</html>

超链接的伪类

:link表示没访问过的连接(正常连接) a:link{}
:visited 表示访问过的连接 a:visited{} (由于隐私设置,这个伪类只能改颜色)
注:上面的两个伪类只用于a标签
:hover 表示鼠标移入的状态 如 a:hover{}
:active 表示鼠标点击时的状态
注:这两个是所有都可以。

伪元素

伪元素表示特殊的元素(特殊的位置,和伪类比较像)
语法: 伪类用::开头
::first-letter表示第一个字母。::first-line表示第一行。
::selection表示选中的内容。::before表示元素的开始位置。
::after表示元素的最后
用法:
p::first-letter{}
::before 和::after要结合content属性使用。
content加的东西无法被选中,因为是通过css添加的。
p::before{content:'abc';color:red;}(在最开头加红色的abc)
p::after{content:'!!!';color;green}(在最后面加!!!,颜色为绿)
注:这两个标签以后会常用,常见的是在标签的前后加“”,特殊符号等等,在复制的时候不会被选中

样式继承

样式的继承,为一个元素设置的样式同时会应用到他的后代元素

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
      p{color: red;}
    </style>
</head>
<body>
   <p>
       这里变红
       <span>这里也变红</span>
   </p>
   <!-- 在p中设置了样式,span继承了p的样式也会变红 -->
</body>
</html>

注意:并不是所有的都会被继承,如背景相关,布局相关等。
发生样式冲突的时候,由选择器的权重(优先级决定)。
内联样式(行内)(优先级1,0,0,0)>id选择器(0,1,0,0)>类(class)和伪类选择器(0,0,1,0)>元素选择器(0,0,0,1)>
通配选择器(0,0,0,0)>继承的样式(没有优先级)
比较优先级时,需要将所有选择器的优先级进行相加运算,最后还优先级越高,越先显示。(每个分组选择器单独计算)
选择器的累加不会超过最大数量级,比如类选择器再高也不超过id选择器(选择器越具体,优先级越高)
优先级相同时,优先使用下面的样式
可以在样式的后面加!important,此时该样式获得最高优先级,甚至超过内联。
注:在开发中要慎用(别用!)

像素百分比

px在不同设备下显示效果不一样
长宽快捷键h100+tab,w100+tab。
百分比可以设置属性值相对于父元素属性的百分比,便于相应的变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
      div#d1{
          background-color: red;
          width: 100px;
          height: 100px;
      }
      div#d2{
          background-color: green;
          width: 50%;
          height: 50%;
      }
    </style>
</head>
<body>
    <div id="d1">
        <div id="d2"></div>
    </div>
    <!-- d2的50%继承父元素的大小所以是50px*50px -->
</body>
</html>

em是相对于字体大小来算的
1em=1font-size,一般浏览器1em=16px,em会根据字体大小的改变而改变。

rem是相对根元素(html)的字体大小来计算的(移动端较多,暂时用不到)

颜色单位

在css中可以用颜色名来设置各种颜色。如red,yellow,blue.
RGB值通过3种颜色的不同浓度来调配出不同的颜色。每一种颜色的范围为0-255(0-100%)
语法:RGB(红,绿,蓝);
such as background-color:(0,255,255);黑(0,0,0) 白(255,255,255)
RGBA:a表示透明
语法:RGBA(红,绿,蓝,透明(用小数));color:rgba(0,0,0,0.5)(1表示不透明,0表示透明)
16进制的RGB语法:#红色绿色蓝色颜色从00-ff color:#ff0000;如果颜色两位两位重复可以简写 #fa0~#ffaa00

hsl(css)值(其他地方多,前端较少)h是色相,s是饱和度,l是亮度
h范围0-360,s范围0%-100%,l范围0%-100%,s和l必须写%
hsla(h,s,l,a);

Q.E.D.