css的基础样式

Bitw-QwQ--猿究院

于 2022-07-24 16:01:57 发布

阅读量522

点赞数 3

文章标签： css 前端 html

本文链接：https://blog.csdn.net/q_qwp_p/article/details/125958326

版权

中文名称：层叠样式表。

英文全称：Cascading Style Sheets ，简称CSS。

作用：在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

语法规则

选择器 {              

属性名：属性值;              

属性名：属性值;              

属性名：属性值;              

……  }

例如
div {
	font-size:12px;
	color:#F00;
	……
}

三种选择器

标签选择器：html中的所有标签都可以作为选择器

<!DOCTYPE html><html>
<head>
    <title>标签选择器</title><meta charset="UTF-8">
</head>
<style>
    /使用标签开头*/
    div{
        color: red;font-size: 28px;
    }
    p{
        color: red;font-size: 28px;
    }
    span{
        color: red;font-size: 28px;
    }
</style>
<body>
    <div>这是div标签,使用了标签选择器</div>
    <p>这是p标签,使用了标签选择器</p>
    <span>这是span标签,使用了标签选择器</span>
</body>
</html>

类（class）选择器：body内的所有元素都有class属性。

注：class名称可以重复使用。

使用：类（class）选择器使用标志符（句点）开头后面写上类的名称。

<!DOCTYPE html><html>
<head>
    <title>类选择器</title><meta charset="UTF-8">
</head>
<style>
    /*类(class选择器使用标志符(句点)开头*/
    .codeup{
        color: red;font-size: 28px;
    }
</style>
<body>
    <div class="codeup">这是div标签,使用了class选择器</div>
    <p class="codeup">这是p标签,使用了class选择器</p>
    <span class="codeup">这是span标签,使用了class选择器</span>
</body>
</html>

id选择器：body内的所有元素都有 id 属性。

注：一个页面中只能使用一个id名，id名必须是唯一。

使用：id选择器使用散列符号（#）开头，后面写上id的名称

<!DOCTYPE html><html>
<head>
    <title>id选择器</title><meta charset="UTF-8">
</head>
<style>
    /*id选择器使用散列符号（#）开头，后面写上id的名称*/
    #codeup{
    color: red;
    font-size: 20px;}
</style>
<body>
    <div id=" codeup">这是div标签,使用了id选择器</div>
    <p id="codeup">这是p标签,使用了id选择器</p>
    <span id=" codeup">这是span标签,使用了id选择器</span>
</body>
</html>

三者优先级：

id选择器>class选择器>标签选择器

引入CSS样式的方式

外部样式表：

将css样式单独写入到一个 xxx.css外部文件中。

（1）使用link标签引入外部css文件。

（2）使用@import导入外部css文件

内部样式表：

将html代码和css样式做简单分离，在网页头部创建style标签，在其中写入css样式。

内联（行内）样式：

html中的所有标签都有style属性，在style属性中直接写入css样式。

示例：

<div style=“color:red;font-size:20px;”> 
    这是内联样式 
</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 外部样式表   index.css       link 是引用外部样式表的标签-->
<!--声明外部样式表  rel=“stylesheet”
    引入的文件类型  type=“text/css”
    引入的文件地址  href=”style.css“
-->
<link rel="stylesheet" href="./css/index.css">

<!--内部样式表-->
<style>
    /* .demo{
        color: aqua;
        font-size: 30px;
    } */
    /* h1{
        font-size: 50px;
        font-family: "楷体";
        font-style: italic;
        font-weight: 100;
    } */
    /* h1{font: 100 50px "楷体";} */
    h1{
        text-align : center;
        text-decoration: overline;
        cursor: help;
    }
    div{
        text-decoration: line-through;
        text-align: center;
        cursor: wait;
    }
    p{
        text-indent: 40px;
        text-align: left;
        text-decoration: underline;
    }
    a{
        text-decoration: none    ;
    }
</style>
<body>
    <!-- 行内【内联】样式表 -->
    <!-- 就近原则   距离标签越近优先级越高-->
    <h1 class="demo" style="color: red;">哈哈哈哈哈</h1> 
    <div><a href="http://www.baidu.com/s">学习CSS</a></div>
    <p>这是一个P标签</p>
    <p>这是一个P标签</p>
    <p>这是一个P标签</p>
</body>
</html>

样式优先级:

行内（内联）样式 > 内部样式表 > 外部样式表

字体样式

字体属性font

字体类型font-family

“隶书” “楷体” 其他

字体大小font-size

像素：px

字体风格font-style

normal 默认值，标准文档样式

italic 斜体

字体粗细font-weight

bold 定义粗体字符

100-900 定义由细到粗的字符

字体属性font

文本样式

color 设置文本颜色

red #362596 rgb(32,250,50)

text-align 设置元素水平对齐方式

left center right

text-indent 设置首行文本的缩进

line-height 设置文本的行高

text-decoration 设置文本的装饰

none:默认，标准文本

underline：定义文本下划线

overline：定义文本上划线

line-through：定义穿过文本的一条线

鼠标样式（cursor）

defalut默认光标

pointer超链接指针

wait等待状态

help指示可用的帮助

text指示文档

crosshair鼠标呈现十字状

背景样式

背景颜色background-color:

red

#536256

rgb(30,250,13)

背景图片地址background-image:

url(图片路径)

图片绝对路径

图片相对路径

背景重复方式background-repeat:

no-repeat 不重复

repeat-x 水平重复

repeat-y 垂直重复

repeat 默认重复

背景定位background-position

像素：px

水平方向：left、center、right

垂直方向：top、center、bottom

背景样式简写

background：图片地址，图片重复方式，背景颜色，背景定位

网页开发中比较常用属性值之间没有先后顺序

列表样式

list-style-type

（1）无序列表

disc 实体圆心（默认）

circle 空心圆

square 实体方心

none 无列表标记

（2）有序列表

1 / a / A / i / I

list-style-image

自定义列表标记为图片属性值：

url(图片路径)

list-style-position

列表标记定位

outside

inside

列表样式简写

list-style

列表标记属性

自定义列表标记图片

列表标记定位

CSS伪类

link单击访问前

visited单击访问后

hover鼠标悬浮其上

active单击未释放

CSS 伪类用于向某些选择器添加特殊的效果。

伪类，顾名思义就是假的，不存在的类，不是由class=""定义的，但元素可以具有同样的一些属性，比如鼠标悬停，那么此时就可以使用伪类，由浏览器指定它一个类，比如a:hover，效果近似于class="hover"，因为可以多次使用，所以叫伪类而不是伪ID，还有就是伪类通常是动态产生的，临时的，并非常驻属性。

CSS高级选择器

并集选择器，交集选择器，后代选择器，子元素选择器，属性选择器

并集选择器

多个选择器通过逗号连接而成

示例：

     div,p,span,.codeup,#helloid{
          color:red;
          font-size:20px;
     }

交集选择器

由两个选择器连接构成，选中二者范围的交集，两个选择器之间不能有空格

第一个必须是标签选择器，第二个必须是类选择器或者ID选择器

示例：

    div.codeup{
          color:red;
          font-size:20px;
    }

    div#codeup{
          color:red;
          font-size:20px;
    }

后代选择器

1.外层的选择器写在前面

内层的选择器写在后面

之间用空格分隔

2.标签嵌套时，内层的标签成为外层标签的后代

3.使用标签选择器、id选择器、类选择没有先后顺序

示例：

     div  .codeup{
         color:red;
         font-size:20px;
     }

子元素选择器

通过 > 连接在一起而成

仅作用于子元素

示例：

     div>.codeup{
         color:red;
         font-size:20px;
     }

属性选择器

选取带有指定属性的元素

选取带有指定属性和值的元素

示例：

    input[name]{
         border:1px soild red;
    }

    input[type=”text”]{
         border:1px soild red;
    }

    div[ class=“codeup”]{
         color:red;
    }

盒子模型

边框(border)

属性	说明	样式值
border-top-style	上边框样式	none：无边框 solid：实线边框 dashed：虚线边框 dotted：点状边框 double：双线边框 hidden：与none相同，应用于解决边框冲突
border-right-style	右边框样式
border-bottom-style	下边框样式
border-left-style	左边框样式
border-style	设置四个边框样式

边框颜色

属性	说明	样式值
border-top-color	上边框颜色	red #536256 rgb(30,250,13)
border-bottom-color	下边框颜色
border-left-color	左边框颜色
border-rigaht-color	右边框颜色
border-color	边框颜色

边框粗细

属性	说明	样式值
border-top-width	上边框	px
border-right-width	右边框
border-bottom-width	下边框
border-left-width	左边框
border-width	左边框

边框简写

属性	说明
border-top	同时设置上边框粗细颜色样式
border-right	同时设置右边框粗细颜色样式
border-bottom	同时设置下边框粗细颜色样式
border-left	同时设置左边框粗细颜色样式
border	同时设置四个边框的粗细、颜色、样式