css学习笔记一

诡异行派大星

已于 2022-03-12 20:47:16 修改

阅读量148

点赞数 1

文章标签： css 学习 css3

于 2022-03-06 23:35:00 首次发布

本文链接：https://blog.csdn.net/qq_46095916/article/details/123319454

版权

一、css与html的结合方式

1、内联样式

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

例如：<div style="color: aqua">hello css</div>

2、内部样式

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

3、外部样式

1、定义css的资源文件

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

注意：

*1，2，3种方式的作用范围越来越大

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

二、css基本语法

格式：

选择器{

属性名1：属性值2；

属性名2：属性值2；

...

}

三、选择器

筛选具有相似特征的元素

1、基础选择器

id选择器

元素选择器

类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础选择器</title>
    <style>
        #div1{
            color: rebeccapurple;
        }
        #div2{
            color: blue;
        }
        p1{
            color: chartreuse;
        }
        .c1s1{
            color: #bb3881;
        }
    </style>
</head>
<body>
<!--id选择器-->
<div id="div1">小狗狗</div>
<div id="div2">小猫咪</div>

<!--元素选择器-->
<p1>羊驼羊驼</p1>

<!--类选择器-->
<p2 class="c1s1">马儿马儿</p2>

</body>
</html>

2、扩展选择器

选择所有元素：*{}

并集选择器：选择器1，选择器2{}

子选择器：选择器1 选择器2{}

父选择器：选择器1>选择器2{}

属性选择器：元素名称[属性名="属性值"]{}

多用于input标签

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

元素：状态{}

如：<a>

状态：

link:初始化状态

visited:被访问过的状态

active:正在访问的状态

hover:鼠标悬浮状态

<!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>扩展选择器</title>
    <style>
        div p{
            color: blue;
        }
        /* 子选择器 */
        div,p{
            color: brown;
        }
        /* 并集选择器 */
        input[type='text']{
            border: 5px solid
        }
        /* 属性选择器 */
        a:hover{
            color: blueviolet;
        }
        a:link{
            color: aqua;
        }
        a:active{
            color: chartreuse;
        }
        a:visited{
            color: deeppink;
        }
        /* 伪类选择器 */

    </style>
    
</head>
<body>
    <div>
        <p>今天星期六</p>
    </div>
    <br>
    <div>今天星期六</div>
    <br>
    <p>今天星期六</p>
    <br>
    <input type="text">
    <br>
    <input type="password">
    <br>
    <a href="aaa">我是超链接</a>
 
</body>
</html>

四：属性

1、字体，文本

font-size:字体大小

color:颜色

text-align:对齐方式

line-height:行高

2、背景

background: 背景，复合属性

3、边框轮廓

border:设置边框，复合属性

4、尺寸

width:宽

height:高

<!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>字体属性</title>
    <style>
        p{
            color: blueviolet;
            font-size: 30px;
            text-align: center;
            line-height: 100px;
            border: 1px solid red;
        }
        div{
            /* 颜色 */
            color: blueviolet;
            /* 字体大小 */
            font-size: 30px;
            /* 边框 */
            border: 1px solid red;
            /* 尺寸 */
            height: 200px;
            width: 200px;
            /* 背景 */
            background: url("images/1.jpg") no-repeat;
        }
    </style>
</head>
<body>
    <p>喜之郎果冻</p>
    <div>我要当太空人</div>
</body>
</html>

5、盒子模型：控制布局

margin：外边距

padding:内边距，但是默认情况下内边距会影响盒子大小，可以设置盒子属性，让width和height就是最终盒子的大小，box-sizing: border-box;

float：浮动

left左浮动

right右浮动

<!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>盒子模型</title>
    <style>
        div{
            border: 1px solid red;
            width: 100px;
        }
        .div2{
            width: 100px;
            height: 100px;
            /* 外边距 */
            /* margin: 50px; */
            
        }
        .div1{
            width: 200px;
            height: 200px;
            /* 内边距 */
            padding: 50px;
            /* 设置盒子属性，让width和height就是最终盒子的大小 */
            box-sizing: border-box;

        }
        .div3{
            float: left;
        }
        .div4{
            float: left;
        }
        .div5{
            float: left;
        }
        
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2">


        </div>
    </div>
    <div class="div3">aaa</div>
    <div class="div4">bbb</div>
    <div class="div5">ccc</div>
</body>
</html>

诡异行派大星

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
css学习笔记一

一、css与html的结合方式1、内联样式在标签内使用style属性指定css代码例如：<div style="color: aqua">hello css</div>2、内部样式在head标签内，定义style标签，style标签的标签体的内容就是css代码3、外部样式1、定义css的资源文件2、在head标签内，定义link标签,来引入外部的资源文件注意：*1，2，3种方式的作用范围越来越大*1方式不常用，后期常用2，.
复制链接

扫一扫