css样式

最新推荐文章于 2023-09-10 14:38:58 发布

薪之助

最新推荐文章于 2023-09-10 14:38:58 发布

阅读量749

点赞数 52

文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_72718348/article/details/125857386

版权

一，css的优势

1，内容与表现分离：

html内容和css样式分别写入各自文件中。

2，减少网页代码量：

网站中不同网页引入同一个css样式，可以有效减少代码量。

3，有利于被搜索引擎收录：

运用独立于页面的css，有利于网页被搜索引擎收录。

4，提高网页浏览速度：

网页中使用css在减少代码量的同时，可以提高用户的浏览速度，节省流量。

5，网页布局灵活：

css提供了丰富的样式文档，使开发者更方便灵活的对网页进行布局和美化。

6，网页风格统一：

网站中不同网页引入同一个css样式，保证风格同一。

二，css选择器

1，类(class)选择器

类选择器定义：

body标签中的所有标签都有class属性。

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

类选择器使用：

类（class）选择器使用标志符（句点）开头

后面写上类的名称。

2，id选择器

id选择器定义：

body标签中的所有标签都有id属性。

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

id选择器使用：

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

3，标签选择器

<style>
//标签选择器
    div{
        color: aqua;
        font-size: 30px;
    }
//类选择器
    .demo{
        color: blue;
        font-size: 40px;
    }
//id选择器
    #text{
        color: yellow;
        font-size: 50px;
    }
    
</style>
<body>
    <div class="demo" id="text">学习css基本选择器</div>
</body>

4，css选择器优先级

id选择器 > 类选择器 > 标签选择器

即上图运行结果为：

三，网页中引入css样式

1，内部样式表

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

2，内联(行内)样式

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

示例：

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

3，外部样式表

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

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

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

link标签引入外部样式文件：

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

<style>
    .one{
        color: burlywood;
        font-size: 80px;
    }
</style>

<body>
    <div style="color: blue; font-size: 90px" class="one">学习css样式优先级</div>
</body>

样式优先级（就近原则）

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

(上图运行结果如下)：

四，css基础样式

1，字体样式

font-style	字体风格	normal 默认值，标准文档样式 italic 斜体
font-weight	字体粗细	bold 定义粗体字符 100-900 定义由细到粗的字符
font-size	字体大小	像素：px
font-family	字体类型	“隶书”“楷体”其他

2，文本样式

color	设置文本颜色	red #362596 rgb(32,250,50
text-align	设置元素水平对齐方式	• left • center • right
text-indent	设置首行文本的缩进
line-heighttext-	设置文本的行高
decoration	设置文本的装饰	• none: 默认，标准文本 • underline：定义文本下划线 • overline：定义文本上划线 • line-through：定义穿过文本的一条线

3，鼠标样式(cursor)

defalut	默认光标
help	指示可用的帮助
text	指示文档
crosshair	鼠标呈现十字状
wait	等待状态
pointer	超链接指针

4，背景样式

background-color	背景颜色	red #536256 rgb(30,250,13)
background-image	背景图片地址	图片绝对路径图片相对路径
background-repeat	背景重复方式	no-repeat 不重复 repeat-x 水平重复 repeat-y 垂直重复 repeat 默认重复
backgroposition	背景定位	• 像素： px • 水平方向： left 、 center 、 right • 垂直方向： top 、 center 、 bottom

背景样式简写：

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

（属性值之间没有先后顺序）

5，列表样式

list-style-type

（1）无序列表

disc 实体圆心（默认）

circle 空心圆

square 实体方心

none 无列表标记

（2）有序列表

1 / a / A / i / I

list-style-image

自定义列表标记为图片

属性值：url(图片路径)

list-stposition

列表标记定位

outside

inside

列表样式简写：

list-style:1,列表标记属性2,自定义列表标记图片3,列表标记定位

6,css伪类

link	单击访问前
visited	单击访问后
hover	鼠标悬浮其上
active	单击未释放

五，css高级选择器和盒子模型

1，并集选择器

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

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

2，交集选择器

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

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

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

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

3，后代选择器

(1)外层的选择器写在前面,内层的选择器写在后面,之间用空格分隔

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

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

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

4，子元素选择器

通过>号连接在一起而成，仅作于子元素。

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

5，属性选择器

选取带有指定属性的元素

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

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

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

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

六，盒子模型

1，外边框(border)

(1)边框样式

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

(2)边框颜色

border-top-style

border-bottom-style

border-left-style

border-right-style

(3)边框粗细

border-top-width

border-right-width

border-bottom-width

border-left-width

简写：border-width:上，右，下，左

2，内边距(padding)

padding-top：顶部内边距

padding-bottom：底部内边距

padding-right：右边内边距

padding-left：左边内边距

box-sizing属性:box-sizing:border-box----->•盒子的实际高度和宽度包括元素内容、边框和内边距

3，外边距(margin)

margin-top：顶部外边距

margin-bottom：底部外边距

margin-left：左部外边距

margin-right：右部外边距

简写：margin:上下边距，左右边距；

4，标准文档流

(1)块级元素：

<h1> - <h6>、<p>、<div>、列表等

总是在新行上开始，占据一整行

高度，行高以及外边距和内边距都可控制

宽度始终是与浏览器宽度一样，与内容无关

它可以容纳内联元素和其他块元素

(2)行内(内联)元素

<span>、<a>、<img>、<strong>等

和其他元素都在一行上

高，行高及外边距和内边距部分可改变

宽度只与内容有关

行内元素只能容纳文本或者其他行内元素

不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用

5,display属性

属性值	作用
none 设置元素不会被显示	控制元素的显示和隐藏块级元素和内联（行内）元素的转变
inline 元素显示为内联（行内）元素
block 元素会被显示为块级元素
inline-block 行内块元素

七，css浮动

floa属性：

left：元素向左浮动。

right：元素向右浮动。

none：默认不浮动。

<!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>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    div.one{
        background: red;
        float: right;
    }
    div.two{
        background: blue;
        float: left;
        
    }
    div.three{
        background: green;
        float: left;
        clear: left;
    }
    h1{
        background: rgb(239, 43, 187);
        
    }
</style>
<body>
    <div class="one">
        <img src="./img/course.jpg">
    </div>
    <div class="two">
        <img src="./img/photo.jpg">
    </div>
    <div class="three">
        <img src="./img/tx.jpg">
    </div>
    <h1>学习css浮动</h1>
</body>
</html>

运行结果：

clear属性：

left：不允许右侧有浮动元素。如果右侧有浮动元素，则重启一行。

right：不允许右侧有浮动元素。

both：左右两侧都不允许有浮动元素。

overflow属性：

auto：自适应，如果内容被修剪，则浏览器会显示滚动条来查看超出内容。

scroll：内容会被修剪，但是浏览器会显示滚动条以便查看超出内容。

hidden：内容会被修剪，并且超出的内容是不可见的。

visible：默认值。内容不会被修剪，会呈现在盒子之外。

八，css定位

1，position属性

(1)static：默认值，没有定位，元素会以标准文档输出。

(2)相对定位(relative)

相对自身位置偏移

<1>设置相对定位的元素会相对它原来的位置，通过指定偏移，到达新的位置。

<2>设置了相对定位的网页元素，无论是在标准流中还是在浮动流中，都不会对它的父级元

素和相邻元素有任何影响，它只针对自身原来的位置进行偏移。

<3>相对定位可进行top、right、bottom、left方向的定位。

<style>
    div.one{
        height: 50px;
        background: rgb(177, 16, 240);
    }
    div.two{
        height: 50px;
        background: rgb(243, 6, 6);
        position: relative;
        top: 10px;
        left: 50px;
    }
    div.three{
        height: 50px;
        width: 200px;
        margin: 0 auto;
        background: rgb(22, 6, 242);
        position: relative;
        /* bottom: 30px;
        right: 50px; */
    }
</style>
<body>
    <div class="one">11111111</div>
    <div class="two">22222222</div>
    <div class="three">33333333</div>
</body>

运行结果：

(3)绝对定位(absolute)

根据离本身最近的已经定位的祖先元素进行偏移。

<1>使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。

<2>相对定位可进行top、right、bottom、left方向的定位，定位偏移单位为 px。

<3>绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响。

<style>
    *{
        margin: 0;
        padding: 0;
    }
    div.oneone{
        position: relative;
    }
    div.one{
        height: 50px;
        background: rgb(177, 16, 240);
        position: absolute;
        top: 50px;
    }
    div.two{
        height: 50px;
        background: rgb(243, 6, 6);
        position: absolute;
    }
    div.three{
        height: 50px;
        background: rgb(22, 6, 242);
        position: absolute;
        bottom: 50px;
    }
</style>
<body>
    <div class="oneone">
        <div class="one">11111111</div>
    </div>
    <div class="two">22222222</div>
    <div class="three">33333333</div>

运行结果：