CSS简介

2023-12-16 15:08:21

选择器：

基础选择器：

选择器 { 样式 }

给谁改样式，改什么样式

标签选择器：写上标签名

p {
      color: rgb(248, 82, 82);
      font-size: 25px;
      /* 修改文字大小为12像素 */
    }
    h2 {
      color: rgb(11, 236, 187);
    }

类选择器：可单独选择一个或某几个标签。

样式(.)点定义，结构类（class）调用，一个或多个，开发最常用

 .blue {
      background-color: #cc00ff;
    }
    .zi
    /* 自己起的，不要使用纯数字或中文命名 */
      {
      color: rgb(149, 10, 241);
    }

    .yellow {
      color: rgb(200, 255, 0);
    }

    .box {
      width: 100px;
      height: 100px;
    }

    .div {
      color: rgb(149, 10, 241)
    }

id选择器：样式#定义，结构id调用，只能用一次。

#pink {
      color: pink;
    }

通配符选择器：用*定义，它表示选择页面中的所有元素

* {
      color: red;
    }

字体

字体类型

注意：

各字体必须用英文逗号隔开

如果有空格隔开的字体加引号

尽量使用系统默认自带字体

h2 {
      font-family: "microsoft Yahei";
    }
 p {

      font-family: "microsoft Yahei", Arial;
    }

字体大小

标题标签比较特殊，需要指定文字大小

p {
      font-size: 20px;
    }

 .body {
      font-size: 16px;
    }

字体粗细

font-weight字体： normal：正常字体

bold:加粗

bolder:特粗

lighter：细体

number

.bold {
      font-weight: bold;
    }

    .cu {
      font-weight: 700;
      /*700变粗  */
    }
    
    .normal {
      font-weight: 400;
      /*400=normal  */
    }

字体样式

p {
      font-style: italic
        /* 文字倾斜 */
    }

    em {
      font-style: normal;
      /* 倾斜回复 */
    }

复合属性

.div {
      /* font:font-style  font-weight  font-size/line-height  font-family */
               /*样式           粗细          大小、行宽           字体  */
      font: italic 400 16px "microsoft yahei"
    }

    /* 样式，粗细，行宽都可以省，但大小、字体不可省 */
    /* 如：font:16px "Microsoft yahei" */

文本

对齐方式

text-align:center居中对齐

text-align:left 左对齐

text-align:right 右对齐

 h2 {
      text-align: center;
    }

文本装饰

none:默认，没有装饰线（最常用）

underline：下划线（常用）

overline：上划线（几乎不用）

line-through：删除线（不常用）

.underline {
      text-decoration: underline;
    }

    img {
      /* 取消链接默认的下划线 */
      text-decoration: none;
    }

文本缩进

text-indent 文本首行缩进

text-indent:20px(精确)

1em=当前元素一个文字大小

 p {
      text-indent: 2em;
    }

行间距

行间距（上间距文字高度下间距）

上间距=(行高-文本高度)/2

div {
      line-height: 25px;
    }

CSS引入方式

1.内部样式表 <style> </style> 一般放在

2.行内样式表 <div style="color:red;font-size:12px;">引入方式</div> <head></head>中

3.外部样式表

（1）单独写一个CSS文件，后缀名为CSS 把CSS代码放入其中写样式

（2）在HTML页面中，使用 <link>标签引入这个文件

复合选择器

一.后代选择器

中国山东济南

1. ol li { }

2.ol li a { }

3.元素1 元素2{ }

4. .nav li a { }

二.子元素选择器

.nav>a{ }

元素一与元素二为父子关系，孙子不选

三.并集选择器

元素1，元素2{ }

div,

.pig li { }

四.伪类选择器

a:link 选择所有未被访问的链接

a:link{
  color:black;
  text-decoration:none;
}

a:visited 选择所有已被访问的链接、

a:visited {
  color:orange;
}

a:hover 选择鼠标指针位于其上的链接

a:hover {
  color:skyblue;
}

a:active 选择活动链接(鼠标按下未弹起的链接)

a:active {
  color:green;
}

例如：

a {
  color:#333;
  text-decoration:none;
}

a:hover {
  color:#369;
  text-decoration:underline;
}

码农公寓

选择器：

字体

文本

CSS引入方式

复合选择器

相关文章