CSS基础

最新推荐文章于 2024-10-01 23:20:42 发布

weixin_43664947

最新推荐文章于 2024-10-01 23:20:42 发布

阅读量50

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_43664947/article/details/111089161

版权

HTML：展示页面信息
CSS：页面美化和布局控制
1.概念：Cascading Stytle Sheets 层叠样式表
层叠：多个样式可以作用在同一个html的元素上，同时生效
2.好处：
*功能比较强大
*将内容展示和样式的控制分离，解耦，让分工协作更容易，可以提高开发效率
3.CSS的使用：CSS与html结合方式
1.内联样式

2.内部样式

3.外部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{
            color: blue;
        }
    </style>

</head>
<body>


<!--
    内联样式 ：
    在标签内使用stytle属性指定css代码    <div style="color: red">hello css</div>

    内部样式：
    在head标签内定义一个stytle标签，stytle标签体内的内容就是css代码
    
    外部样式：
    1.定义css资源文件
    2.在head标签内，定义一个link标签，引入外部的资源文件


-->

<div >hello css</div>

</body>
</html>

4.CSS基本语法
格式：
选择器{
属性名1：属性值1；
属性名2：属性值2；
属性名3：属性值3；
…
}
选择器：筛选具有相似特征的元素
注意事项：
每一对属性需要用分号隔开

5.选择器
分类：
1.基本选择器
*id选择器
*元素选择器
*类选择器

2.扩展选择器
选择所有元素：语法：{}
*并集选择器：语法：选择器1，选择器2{}
*子选择器：筛选选择器1元素下的选择器2元素
语法：选择器1 选择器2{}
*父选择器：筛选选择器2的父元素选择器1
语法：选择器1>选择器2
*属性选择器：选择元素名称，属性值=属性值的元素
语法：元素名称[属性名=“属性值”]{}
伪类选择器：选择一些元素具有的状态
语法：元素：状态{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #div1{
            color: blue;
        }
        div{
            color: red;
        }
        .cls1{
            color: aqua;
        }
        div>p{
            border: 1px solid;
        }
        input[type='text']{
            border: aqua  solid;
        }
    </style>

</head>
<body>


<!--
    内联样式 ：
    在标签内使用stytle属性指定css代码    <div style="color: red">hello css</div>

    内部样式：
    在head标签内定义一个stytle标签，stytle标签体内的内容就是css代码

    外部样式：
    1.定义css资源文件
    2.在head标签内，定义一个link标签，引入外部的资源文件

-->


<!--1.基本选择器
*id选择器   建议id值唯一
语法：#id属性值{}
*元素选择器   选择具有相同标签名称的元素
语法：标签名称{}
*类选择器  选择具有相同的class属性值的元素
语法：.class属性值{}
-->

<div id="div1">hello css</div>
<div >hello html</div>
<p class="cls1">hello js</p>

<input type="text">

</body>
</html>