CSS简介及常用样式

一、CSS简介

CSS:层叠样式表(英文全称:Cascading Style Sheets):是一种用来表现HTML样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

二、CSS选择器

2.1基本选择器(三种)

1.标签选择器

<style>
    p {
        font-size:20px;
    }
</style>

2.类选择器(不唯一,用.

<style>
    .one {
        font-size:20px;
    }
</style>
<p class="one">这是一个p标签</p>

3.id选择器(唯一,一个网页只能出现一次,用#

<style>
    #one {
        font-size:20px;
    }
</style>
<p id="one">这是一个p标签</p>

2.2层次选择器

1.后代选择器

下面div中的全部p中都会字体变大,div外的p则不会

<style>
    div p {
        font-size:20px;
    }
</style>
<div>
    <p>这是div里的p标签</p>
    <p>这是div里的p标签</p>
</div>
<p>这是p标签</p>

2.子选择器

只能找到前两个p无法再找到里面的p

<style>
    div > p {
        font-size: 20px;
    }
</style>
<div>
    <p>这是div里的p标签</p>
    <p>这是div里的p标签</p>
    <ul>
        <li><p>这是div里的p标签</p></li>
    </ul>
</div>
<p>这是p标签</p>

3.兄弟选择器

相邻兄弟选择器:找一个元素下边的第一个兄弟元素,操作符是+号
所有兄弟选择器:找一个元素下边所有兄弟元素,操作符是~号

<style>
    /*第2,4,5,7的p会放大字体,因为他们上面还有个p,第三个p没有放大是因为被h3中断了导致上面并不是p*/
    p + p {
        font-size: 20px;
    }
</style>
<div>
    <p>这是div里的p标签</p>
    <p>放大</p>
    <h3>断开</h3>
    <p>这是div里的p标签</p>
    <p>放大</p>
    <p>放大</p>
</div>
<p>这是p标签</p>
<p>放大</p>
<style>
    /*跟他同级的不含它本身*/
    p ~ p {
        font-size: 20px;
    }
</style>
<div>
    <p>这是div里的p标签</p>
    <p>放大</p>
    <h3>断开</h3>
    <p>放大</p>
    <p>放大</p>
    <p>放大</p>
</div>
<p>这是p标签</p>
<p>放大</p>

4.群组选择器

前三个p中字体都变大了

<style>
    div > p,li > p {
        font-size: 20px;
    }
</style>
<div>
    <p>这是div里的p标签</p>
    <p>这是div里的p标签</p>
    <ul>
        <li><p>这是div里的p标签</p></li>
    </ul>
</div>
<p>这是p标签</p>

2.3伪类选择器

1.:first-of-type:选择一组子元素中的第一个(即使有其他子元素,也不会受到影响)

<style>
    div p:first-of-type{
        color: red;
    }
</style>
<div>
    <p>one</p>
    <p>two</p>
    <p>three</p>
</div>

2.:last-of-type:选择一组子元素中的最后一个(即使有其他子元素,也不会受到影响)

<style>
    div p:last-of-type {
        color: red;
    }
</style>
<div>
    <p>one</p>
    <p>two</p>
    <p>three</p>
</div>

3.:nth-of-type():使用索引来选择某一个子元素(即使有其他子元素,也不会受到影响)

<style>
    div p:nth-of-type(2){
        color: red;
    }
</style>
<div>
    <p>one</p>
    <p>two</p>
    <p>three</p>
</div>

三、CSS引入方式

  • 行内样式
  • 内部样式
  • 外部样式

3.1行内样式

只对写入本标签生效,多个用,隔开

<p style="color: orange;font-size:23px;">行内样式</p>

3.2内部样式

可以参考上面第二模块部分

<style>
    div p:nth-of-type(2){
        color: red;
    }
</style>
<div>
    <p>one</p>
    <p>two</p>
    <p>three</p>
</div>

3.3外部样式

要单独写一个.css文件,并且要在html页面中导入,在head中添加

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

四、CSS优先级

4.1基本规则

  • 从引用方式方面来说:行内样式 > 内嵌样式/外部样式

  • 从选择器方面来说:ID 选择器 > 类选择器(属性选择器、伪类选择器) > 标签选择器

4.2叠加时的优先级

  • 就近原则:距离最近的样式有效。
  • 顺序原则:这里的顺序是指的书写顺序,也就是最后书写(不是调用)的样式有效。
  • 精细原则:或者叫特殊原则。既选择器的指向越精细越优先。

五、CSS中的颜色

这里仅仅写了我常用的,更多的读者可以进一步查询如:HSL、HSLA

5.1直接使用颜色英文单词

red、green、orange、blue...

5.2使用十六进制表示

//前两位红,中间两位绿,后面两位蓝
通常是6位
#99CCFF
也可以简写为3位
#9CF

5.3RGB与RGBA

//RGB由三部分组成
//第一位红,第二位绿,第三位蓝(范围0-255)
RGB(255,0,0);

//RGBA由四部分组成,最后一位用于加透明度
//最后一位(范围(0-1),0完全透明,1完全不透明
RGBA(255,0,0,0.6);

六、常用样式

6.1字体样式

属性名 含义
font-family 设置字体名称 宋体、黑体...
font-size 设置字体大小 px,em
font-style 设置字体风格 normal,italic
font-weight 设置字体粗细 normal,bold,100-900(400为normal,700为bold)

6.2文本样式

属性名 含义
color 设置文本颜色 #45F78,#ff6600,#f60, rgb(0,0,0)
text-align 设置元素水平对齐方式 left, center,right, justify
vertical-align 设置元素垂直对齐方式 middle, top, bottom,长度或百分比(可为负值)
(只对内联元素有效。或对td、th有效。)
图片居中有时候也会用它
line-height 设置文本的行高 normal,长度或百分比(可为负值)
text-decoration 设置文本的装饰 none, underline, overline, line-through

6.3尺寸样式

属性名 含义
width 宽度 长度或百分比
height 高度 长度或百分比

6.4列表样式

属性名 含义
list-style 设置列表自身样式 none

6.5背景样式

属性名 含义
background-color 背景颜色 #45F78,#ff6600,#f60, rgb(0,0,0)
background-image 背景图象 图片URL或none
background-repeat 背景重复 repeat、repeat-x、repeat-y、no-repeat

6.6鼠标样式

属性名 含义
cursor 设置鼠标放置样式 default、pointer(小手常用)、wait、help、text、crosshair

6.7伪类样式

这个顺序不能变从上到下lvha

属性名 含义
a:link 未单击访问时超链接样式 a:link
a:visited 单击访问后超链接样式 a:visited
a:hover 鼠标悬浮其上的超链接样式 a:hover
a:active 鼠标单击末释放的超链接样式 a:active

6.8透明度样式

属性名 含义
opacity 设置透明度 0-1

热门相关:仙碎虚空   墨先生,乖乖娶我   傲娇总裁:蜜宠小甜妻!   百炼成仙   仙碎虚空