CSS基础

m0_53484441

已于 2024-01-26 17:11:09 修改

阅读量330

点赞数 10

文章标签： css 前端

于 2024-01-15 15:21:24 首次发布

本文链接：https://blog.csdn.net/m0_53484441/article/details/135600323

版权

CSS由一个选择器和一条或多条声明构成，选择器即标签，选择器选择不同的标签并设置这些标签的样式。

1、CSS格式规范

空格规范：属性值前面，冒号后面保留一个空格

选择器和大括号中保留空格

选择器 style 标签的配置都不加双引号，除了字体是汉字或者含有空格

2、选择器分类：基础选择器和复合选择器

1）基础选择器：标签选择器、类选择器、id选择器、通配符选择器

标签选择器：一种标签，一种样式

<head>
    <style>
<!--标签选择器，直接将一类标签选出来设成一样的样式-->
        p {
            color: green;
        }
        div {
            color: red;
        }
    </style>
</head>

类选择器：将不同样式，设为不同的类，单个标签只需选择需要的样式即可，一个标签可有多个类

<!--.类名 类选择器，标签通过class属性调用class类，单独选择标签自定义样式-->
<head>
    <style>
        .red {
            color: red;
        }
        .front20 {
            front-size: 20px;
        }
    </style>
</head>
<body>
    <ul>
        <li class="red">变红色</li>
        <li>不变红色</li>
    </ul>
<!--class属性中可写多个类名，每个类名空格隔开-->
    <div class="red front20">字体红色且大小为20</div>
</body>

id选择器：id名不能重复使用，class相当于名字可被多次调用（区别在于使用次数），相同的id值不能出现在同一个文档中，一般和 js 搭配。

id是先找到特定标签，再给它定义样式。
class是先定义好一种样式，再套给多个需要此样式的标签。

<head>
    <style>
        #pink {
            color: pink;
        }
        #yellow {
            color: yellow;
        }
    </style>
</head>
<body>
    <div id="pink">变粉色</dv>
    <div id="pink">会报错</dv>
    <div id="yellow">变黄色</dv>
</body>

通配符选择器：不需要在标签中调用，自动给所有标签/元素使用样式

<head>
    <style>
        * {
            color: red
        }
    </style>
</head>

2）复合选择器：后代选择器、子选择器、并集选择器、伪类选择器

后代选择器：元素1 元素2 { 样式声明 }，元素2必须要是元素1的后代（儿子、孙子皆可），样式作用对象是元素2标签以及该标签的所有后代。

<head>
  <style>
    ol li {
      color: red;
    }
  </style>
</head>
<body>
  <ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li><a href="#">样式对象是li，则li的后代也能获得该样式</a></li>
    ol标签内，li标签外并不能获得样式
  </ol>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li><a href="#">ul中的li并不是样式作用对象</a></li>
  </ul>
</body>

子元素选择器（子选择器）：元素1 > 元素2 {样式声明}，区别于后代选择器，它只选择亲儿子元素，即元素2。

<head>
  <style>
    .nav>a {
      color: red;
    }
  </style>
</head>
<body>
  <div class="nav">
    <a href="#">我是div的儿子</a>
    <p>
      <a href="#">我是div的孙子</a>
    </p>
  </div>
</body>

并集选择器：元素1 , 元素2{ 样式声明 }，可选择多组标签定义相同的样式，用于集体声明。竖着写

<head>
  <style>
      /*把熊大熊二改为红色，小猪佩奇改为粉色*/
      div,
      p,
      .pig>li {
        color: red;
      }
  </style>
</head>
<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
      <li>小猪佩奇</li>
      <li>猪爸爸</li>
      <li>猪妈妈</li>
    </ul>
</body>

伪类选择器：添加特殊效果，标签:元素{ 样式声明 }

链接伪类选择器：LVHA循环顺序顺序声明，a 链接有默认样式，直接body {}无法设置样式，需要给链接单独指定样式

<head>
  <style>
    /*设置未被访问,没有点击过的链接*/
    a:link {
      color: #333;
      text-decoration: none;
    }
    /*设置已访问,已点击过的链接*/
    a:visited {
      color: orange;
    }
    /*鼠标经过标签的样式*/
    a:hover {
      color: skyblue;
    }
    /*鼠标按下但还未弹起的链接*/
    a:active {
      color: green;
    }
  </style>
</head>
<body>
  <a href="#">设置链接特殊样式</a>
  <a href="http:xxxxx.xxx.xx">未知网站</a>
</body>

focus伪类选择器：input:focus 选取获得焦点/光标的表单元素

<head>
  <style>
    /*选取获得光标的input表单元素，一般情况下只能获取表单元素*/
    input:focus {
      background-color: pink;
      color: red;
    }
  </style>
</head>
<body>
  <input type="text">
  <input type="text">
  <input type="text">
</body>

3、CSS的引入方式

样式表（引入/ 样式书写方式）：

行内样式表：行内式，直接写在 html <body> 中的标签内部

练习用 CSS 全为内部样式表

<body>
<!--  标签内为style属性，双引号中要符合CSS的格式，多个样式中用空格分开-->
  <p style="color: red; font-size: 18px;">行内样式表</p>
</body>

内部样式表：嵌入式，在 html <head> 中单独的<style>标签内

外部样式表：链接式，另外存一个 .css 文件，

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


<!--.css文件中，css文件中没有标签，只有样式-->
div {
    color: red;
}

4、CSS字体属性 Fonts

font-family：字体系列（可以多种字体）

font-size：字体大小（加单位像素值px，不加双引号），可以通过 body 为整个页面设置同样的大小，但不包括标题标签，h1 - h4 都要单独设置字体大小

font-weight：字体粗细 normal / bold / bolder / 数字（不加单位，指定粗细，数字常用）

font-style：字体样式 normal / italic（斜体），常用于给修改斜体标签<em>为标准

<head>
  <style>
      h2 {
        font-family: "宋体";
        /*字体大小不需要加双引号*/
        font-size: 25px;
      }
      p {
        /*指定多个字体，浏览器会轮流尝试字体直到合适为止*/
        font-family: Arial,"Microsoft YaHei","微软雅黑";
        font-style: italic;
      }
      .bold{
        font-weight: bold;
      }
      body {
        font-size: 18px;
      }
  </style>
</head>
<body>
  <h2>宋体</h2>
  <p class="bold">Arial</p>
</body>

font： 复合属性 font-style font-weight font-size/line-height font-family

不需要设置属性可以有空缺取默认值，但必须要保留 font-size 和 font-family 属性，并保证它们的相对位置，否则 font 起不到作用

<head>
  <style>
      div {
        font: italic 700 16px "Microsoft yahei";
      }
      p {
        font: 20px "宋体";
      }
  </style>
</head>
<body>
  <div>复合属性，节省代码；不能更换语序，各属性空格隔开</div>
  <p>不全的复合属性</p>
</body>

5、CSS文本属性 Text

color：文本颜色

text-align ：水平对齐方式 center / left / right

<head>
  <style>
      div {
        /*color: #ff0000; 十六进制最常用 */
        /*color: red;*/
        color: rgb(255,0,0);
        text-align: center;
      }
  </style>
</head>
<body>
  <div>设置字体为红色</div>
</body>

text-decoration：装饰文本，none / underline 下划线 / overline 上划线 / line-through 删除线

链接标签<a>自带下划线，常用于去掉

<head>
  <style>
    h1 {
      text-decoration: underline;
    }
    a {
        text-decoration: none;
    }
  </style>
</head>
<body>
  <h1>标题添加下划线</h1>
  <a href="#">没有下划线的链接</a>
</body>

text-indent：文本缩进距离（单位：像素px / 相对单位em，为当前元素一个文字的大小

line-height：行间距（单位：像素值px），包括上间距、下间距和文本高度

<head>
  <style>
    p {
      font-size: 28px;
      /*text-indent: 20px;*/
      text-indent: 2em;
      line-height: 36px;
    }
  </style>
</head>
<body>
  <p>文本首行缩进为当前元素两个文字的大小，行间距为36px</p>
</body>