css css的使用 css语法

最新推荐文章于 2024-01-09 20:49:39 发布

pofenx

最新推荐文章于 2024-01-09 20:49:39 发布

阅读量98

点赞数

分类专栏： javaweb 文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_54425421/article/details/121153865

版权

javaweb 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章目录

css
- css的使用
- css语法

css

css：页面美化和布局控制

概念：Cascading Style Sheets 层叠样式表

层叠：多个样式可以作用在同一个html的元素上，同时生效

好处：

功能强大：

将内容展示和样式控制分离

降低耦合度，解耦

让分工协作更容易

提高开发效率

css的使用

css与html结合方式

内联样式

在标签类使用style属性指定css代码

如:

<div style="color:red;"> hello css</div>

内部样式

在head标签内，定义style标签，style标签内容体就是css代码

如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>div{color: red;}
    </style>
</head>
<body>
<div>hello css</div>
</body>
</html>

外部样式

定义css资源文件

在head标签内，定义link标签，引入外部的资源文件

如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/a.css">
</head>
<body>
<div>hello css</div>
<div>hello css</div>
</body>
</html>

a.ass文件

div{
    color: blue;
}

注意：

1,2,3种方式，css作用范围越来越大

1方式不常用，后期常用2,3

3种格式可以写为

css语法

格式：

选择器{
    属性名1:属性值1;
    属性名2:属性值2；
    ...
}

选择器：筛选具有相似特征的元素
注意：每一对属性需要用;隔开，最后一对属性可以不加

选择器
属性

基础选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/a.css">
    <style>#div1{
        color: red;
    }
    div{
        color: green;
    }.cls1{
             color: blue;
         }
    </style>
</head>
<body>
<!--1.基础选择器
1. id选择器：选择具体的id属性值的元素，建议在一个html页面中id值每一
语法 ： #id属性值{}
2. 元素选择器：选择具有相同标签名称的元素
语法:标签名称{}
注意：id选址器优先级高于元素选择器
3.类选择器：具有相同的class属性值的元素
语法 .class属性值{}
注意：类选择器优先级高于元素选择器
-->
<div id="div1">pofenx</div>
<div>pofenx_max_pro</div>
<div>hello css</div>
<div>hello css</div>
<p class="cls1">pofenxxxxx</p>
<p>呵呵</p>
</body>
</html>

扩展选择器

选择所有的元素：语法：*{}
并集选择器：选择器1，选择器2{}
子选择器：筛选选择器1元素下的选择器2元素

语法：选择器1：选择器2{}

父选择器：筛选选择器2的父元素选择器1

语法：选择器1>选择器2{}

属性选择器：选择元素名称，属性名=属性值的元素

语法：元素名称[属性名=“属性值”]{}

伪类选择器：选择一些元素具有的状态

语法：元素：状态{}

如

状态:

link:初始化的状态

visited：被访问过的状态

active：正在访问的状态

hover：鼠标悬浮状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div p{
            color: red;
        }

    </style>
    <style>
        div>p{
            border: 5px solid;
        }
        a:link{
            color: red;

        }
        a:visited{
            color: blue;
        }
        a:hover{
            color: green;
        }
    </style>
</head>
<body>
<div>
    <p>pofenx</p>
</div>
<p>pofenx1</p>
<div>pofenx_max_min</div>

<div>aaa</div>
<input type="text">
<input type="password">
<br>
<a href="#">aaaa</a>
</body>
</html>

6.属性

字体，文本

font-size:字体大小

color:文本颜色

text-align:对齐方式

line-height；型高

背景

background:

边框：

border:设置边框，符合属性

尺寸：width:宽度，height:高度
盒子模型：布局控制‘

margin:外边距

padding:内边距，默认情况下内边距会影响整个盒子的大小

box-sizing,border-box;设置盒子的属性，让width和height就是最终盒子的大小

float：浮动

left；，right

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border: 1px  solid red ;
            width: 100px;
        }
        .div1{
            width: 100px;
            height: 100px;
            /*外边距
            margin: 50px;*/
        }
        .div2{
            width: 200px;
            height: 200px;
            padding: 50px;
            /*设置盒子属性，让width和height就是盒子的最终大小*/
            box-sizing: border-box;
        }
        .div3{
          float: left;
        }
        .div4{
            float: left;
        }
        .div5{
            float :right;
        }
    </style>
</head>
<body>
<div class="div2"><div class="div1"></div></div>
<div class="div3">aaa</div>
<div class="div4">bbb</div>
<div class="div5">ccc</div>
</body>
</html>

pofenx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css css的使用 css语法

文章目录csscss的使用css语法csscss：页面美化和布局控制概念：Cascading Style Sheets 层叠样式表层叠：多个样式可以作用在同一个html的元素上，同时生效好处：功能强大：将内容展示和样式控制分离降低耦合度，解耦让分工协作更容易提高开发效率css的使用css与html结合方式内联样式在标签类使用style属性指定css代码如:<div style="color:red;"> hello css</div&
复制链接

扫一扫