css样式

最新推荐文章于 2023-02-27 23:06:08 发布

pink@zhu

最新推荐文章于 2023-02-27 23:06:08 发布

阅读量147

点赞数

分类专栏：前端三剑客基础文章标签： css

本文链接：https://blog.csdn.net/qq_55280248/article/details/119668396

版权

前端三剑客基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

层叠样式表 — 也就是CSS — 是你在HTML之后应该学习的第二门技术。HTML用于定义内容的结构和语义，CSS用于设计风格和布局。比如，您可以使用CSS来更改内容的字体、颜色、大小、间距，将内容分为多列，或者添加动画及其他的装饰效果。

css基本操作样式

<head>
    <style>
        选择器{
            属性名：属性值;
            属性名：属性值;
        }
    </style>
</head>
选择器：要修饰的对象（东西）
属性名：修饰对象的哪一个属性（样式）
属性值：样式的取值

css应用方式

也称为CSS引用方式，有三种方式：内部样式、行内样式、外部样式

1.内部样式

也称为内嵌样式，在页面头部通过style标签定义

对当前页面中所有符合样式选择器的标签都起作用

2.嵌入样式

也称为嵌入样式，使用HTML标签的style属性定义

只对设置style属性的标签起作用

3.外联样式

使用单独的 .css文件定义，然后在页面中使用 link标签或 @import指令引入

<link rel="stylesheet" type="text/css" href="CSS样式文件的路径">外联的运用
<style>
    @import "CSS样式文件路径";
    @import url(CSS样式文件路径);
</style>

4.选择器

1 标签选择器 :以标签名作为样式应用的依据

2 类选择器 :以标签的class属性作为样式应用的依据

注意事项：

- - - - 调用时不能添加 . 号
      - 同时调用多个类选择器时，以 空格 分隔
      - 类选择器名称不能以 数字 开头

3 ID选择器 :使用自定义名称，以 # 作为前缀，然后通过HTML标签的id属性进行名称匹配以标签的id属性作为样式应用的依据，一对一的关系

4. 复合选择器 :标签选择器和类选择器、标签选择器和ID选择器，一起使用

5.组合选择器 :也称为集体声明将多个具有相同样式的选择器放在一起声明，使用逗号隔开

6.嵌套选择器 :在某个选择器内部再设置选择器，通过空格隔开只有满足层次关系最里层的选择器所对应的标签才会应用样式

7.伪类选择器 :根据不同的状态显示不同的样式，一般多用于标签

四种状态：

- - - - :link 未访问的链接
      - :visited 已访问的链接
      - :hover 鼠标悬浮到连接上，即移动在连接上
      - :active 选定的链接，被激活

伪类选择器的演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        /*a:link{
            font-size: 12px;
            color:black;
            text-decoration: none;
        }
        a:visited{
            font-size: 15px;
            color:;
        }
        a:hover{
            font-size: 20px;
            color:blue;
        }
        a:active{
            font-size: 40px;
            color:green;
        }*/
        a:link,a:visited{
            color:#666666;
            font-size: 13px;
            text-decoration: none;
        }
        a:hover,a:active{
            color:#ff7300;
            text-decoration: underline;
        }
        /*普通的标签也可以使用伪类选择器*/
        p:hover{
            color:red;
        }
        p:active{
            color:blue;
        }
    </style>
</head>
<body>
    <a href="复杂选择器.html">复杂选择器.html</a>
    <p>CSS从入门到精通！</p>
</body>
</html>

8. 伪元素选择器

- - - :first-letter 为第一个字符的样式
    - :first-line 为第一行添加样式
    - :before 在元素内容的最前面添加的内容，需要配合content属性使用
    - :after 在元素内容的最后面添加的内容，需要配合content属性使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p:first-letter{
            color:red;
            font-size:30px;
        }
        p:first-line{
            background:pink;
        }
        p:before{
            content:"嘿嘿";
        }
        p:after{
            content:"哈哈";
        }
    </style>
</head>
<body>
    <p>hello world!</p>
    <hr>
    <p>
        hello world! <br>
        welcome to css!
    </p>
</body>
</html>

选择器的优先级的问题：行内样式>ID选择器>类选择器>标签选择器//越小越大

原因：首先加载标签选择器,再加载类选择器，然后加载ID选择器，最后加载行内样式

后加载会覆盖先加载的同名样式

就近原则——原因：按照书写顺序依次加载，在同优先级的前提下，后加载的会覆盖先加载的同名样式，所以离的越近越优先

css的常见属性：

字体属性：

属性	含义	说明
font-size	大小、尺寸	可以使用多种单位
font-weight	粗细
font-family	字体
font-style	样式
font	简写	font:font-style\|font-weight\|font-size\|font-family

文本属性：

css文本类型.PNG

颜色的设置：color

颜色名称：使用英文单词

16进制的RGB值：

特定情况下可以缩写

#FFFFFF--->#FFF 白色 
#000000--->#000 黑色 
#FF0000--->#F00 红色 
#00FF00--->#0F0 绿色 
#0000FF--->#00F 蓝色 
#CCCCCC--->#CCC 灰色 
#FF7300--->无法简写

rgb函数：rgb(red,green,blue)

rgba函数：rbga(red,green,blue,alpha)

可以设置透明度，alpha取值范围：[0,1] 0表示完全透明 1表示完全不透明

背景样式设置：background（背景）

属性含义说明

background-color 背景颜色

background-image 背景图片

background-repeat 背景图片的重复方式取值：repeat(默认)， repeat-x，repeat-y,norepeat

background-position 背景图片的显示位置

background-attachment 背景图片是否跟随滚动取值：scroll(默认)、 fixed固定不动

background 简写

列表属性

css样式.PNG

盒子模型：

盒子模型是网页布局的基础，将页面中所有元素都看作是一个盒子，盒子都包含以下几个属性：width 宽度 height 高度 border 边框 padding 内边距 margin 外边距！！！

盒子模型的使用：border：表示盒子的边框

分为四个方向：上top、右right、下bottom、左left

样式style的取值：solid实线、dashed虚线、dotted点线、double双线、 inset内嵌的3D线、outset外嵌的3D线

padding：表示盒子的内边距，即内容与边框之间的距离

同样也分为四个方向，也可以简写（按顺时针方向，默认上下一样左右一样）

注意：如果上下冲突，则以上为准，如果左右冲突，则以左为准

margin：表示盒子的外边距，即盒子与盒子之间的距离

同样也分为四个方向，也可以简写（按顺时针方向，默认上下一样，左右一样）

/* 元素的水平居中 */ 
/* 1.块级元素的水平居中 */ 
    margin: auto; 
    /* 提示：块级元素必须指定宽度 */
    /* 2.文本的水平居中 */ 
    text-align:center; 
    /* 3.垂直居中，将height和line-height设置为相同 */ 
    height:100px; 
    line-height:100px;

元素所占空间

页面中的元素实际所占的空间

- - - - 宽度=width+左右padding+左右border+左右margin
      - 高度=height+上下padding+上下border+上下margin

外边距的合并：也称为外边距的折叠，指的是两个块级元素垂直外边距相遇时，它们将合并为一个外边距，合并后的外边距值为其中较大的·那个外边距值

两种情况：

当一个元素出现在另一个元素上面时，第一个元素的下边距与第二元素的上边距会发生合并

当一个元素包含在另一个元素中时，并且没有内边距或边框把外边距分隔开时，两个元素的上外边距会发生合并外边距的合并的好处，让排版在视觉上显得更美观

定位：相对定位，绝对定位

相对定位

先设置元素的position属性为relative,然后再设置偏移量

绝对定位

先设置父标签为非static定位，然后设置元素的position属性为absolute，最后再设置偏移量

取值	含义	说明
static	默认值	按照常规文档流进行显示
relative	相对定位	相对于标签原来的位置进行的定位
absolute	绝对定位	相对于第一个非static定位的父标签的定位
fixed	固定定位	相对于浏览器窗品进行定位

设置定位方式后，还要设置定位属性（偏移量）：top、bottom、left、right

注意：

- - - 一般来说都会将父标签设置为非static定位
    - 如果父标签不是非static定位，则会相对于浏览器窗口进行定位
    - 设置元素为绝对定位后，元素会浮到页面上方

固定定位

先设置元素的position属性为fixed，然后再设置偏移量

设置元素为固定定位后，元素会浮动在面面上方

其他的css应用：

浮动属性

通过float属性来实现元素的浮动，可以让块级元素脱离常规的文档流，向左或向右移动，在同一行显示，

如果一行显示不下，则会换行显示。左浮动 left，右浮动 right，不浮动 none。

清除属性

通过clear属性来实现清除，设置元素的哪一侧不允许有浮动元素

- - - - eft左侧不允许出现浮动元素
        right右侧不允许出现浮动元素
        both两侧不允许出现浮动元素
        none允许两侧出现浮动元素，默值

元素的显示和隐藏

display

通过display属性设置元素是否显示，以及是否独占一行

行级元素是无法设置宽度和高度的，可以为行级元素设置 display:inline-block ,然后就可以设置宽和高了

visibility

也可以通过visibility属性设置元素的显示和隐藏

取值	含义	说明
visible	显示
hidden	隐藏

区别

- - - - display隐藏时不再占据页面中的空间，后面的元素会占用其位置
      - visibility隐藏时会占据页面中的空间，位置还保留在页面中，只是不显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .div1{
            width: 100px;
            height: 100px;
            background:blue;
            display:inline;
        }
        span{
            width: 100px;
            height: 50px;
            background:yellow;
            display:inline-block;
        }
        i{
            display:block;
            width: 100px;
            height: 50px;
            background:red;
        }
        p{
            width: 50px;
            height: 50px;
            background:red;
        }
        .p1{
            visibility:hidden;
        }
        .login{
            display:inline-block;
            width: 100px;
            text-decoration:none;
            background:rgba(255, 0, 0, 0.7);
            color:#fff;
            padding:10px;
            text-align:center;
            border-radius:10px;
        }
        .login:hover{
            background:rgba(255, 0, 0, 0.5);
        }
    </style>
</head>
<body>
    <div class="div1">div1</div>
    <span>span1</span>
    <i>呵呵</i>
    <hr>
    <p class="p1">hello</p>
    <p class="p2">world</p>
    <hr>
    <a href="javascript:alert('欢迎光临')" class="login">登&nbsp;&nbsp;&nbsp;&nbsp;录</a>
</body>
</html>

轮廓属性：

border:元素边框的设置

轮廓outline,用于在元素周围绘制一个轮廓，位于border外围，可以突出显示元素

- - - - outline-width:轮廓宽度
        outline-color:轮廓颜色
        outline-style:轮廓样式
        outline简写

两个轮廓的区别：

- - - - border可以应用于所有html元素，而outline主要用于表单元素、超链接元素
        当元素获得焦点时会自动出现outline轮廓效果，当失去焦点时会自动消失，这是浏览器默认行为
        outline不影响元素的尺寸和位置，而border会影响

css样式的其他属性的设置：

overflow属性：当元素内容溢出时该如何处理

常用取值：

- - - - visible溢出时可见，显示在元素外，默认值
        hidden溢出的部分不可见（常用）
        scroll无论是否出现溢出始终出现滚动条
        auto溢出时自动出现滚动条

cursor属性：用于设置光标的形状

常用属性：

- - - - default默认光标，一般为箭头
        pointer手形，光标移动超链接上时一般显示为手形
        move表示可移动
        text表示文本
        wait表示程序正忙，需要等待
        hep表示帮助

pink@zhu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css样式

层叠样式表 — 也就是CSS— 是你在HTML之后应该学习的第二门技术。HTML用于定义内容的结构和语义，CSS用于设计风格和布局。比如，您可以使用CSS来更改内容的字体、颜色、大小、间距，将内容分为多列，或者添加动画及其他的装饰效果。css基本操作样式<head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style></h.
复制链接

扫一扫

专栏目录