CSS简单使用

代码敲上天.

已于 2023-03-05 19:52:59 修改

阅读量420

点赞数

分类专栏： HTML、CSS、JS 文章标签： css 前端 html Powered by 金山文档

于 2023-03-01 14:24:06 首次发布

本文链接：https://blog.csdn.net/m0_52226803/article/details/129278663

版权

HTML、CSS、JS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS的基本介绍

CSS基本内容

CSS的文件结构

凡是html中的标签都可以进行选中，p代表标签中所有的p标签都遵从以上格式。

CSS选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        p{

            background-color: red;
            font-size: 40px;

        }
        .p1{
            font-family:楷体;
        }

    </style>
    <title>Document</title>
</head>
<body>
    <p>wwww.imooc.com</p>
    <p class="p1">慕课网</p>
    <p class="p1">层叠了P效果和P1效果双重效果</p>
</body>
</html>

内部样式常见属性

外部样式的使用

样式引用的优先级

文本样式常见的属性

三种颜色表示方法：英文，16进制表示方法，RGB表示方法。

字体类样式常见属性

伪类样式

伪类就是一种特殊的类的形式，专门用于设置超链接点击前后等的样式状态。

点击前是红色点击后是绿色悬停是黄色30Px

当然其他标签也可以设置

伪元素选择器

其他选择器

类选择器：允许重复，相同名称具有相同效果格式如下

标签选择器：标签可以直接使用，相同标签全部被选择格式如下

id选择器：为了方便使用是不允许重复，语法上允许，唯一的选择器，格式如下#+id。

*号选择器：对所有的内容进行控制。

逗号选择器：逗号可以连续对多个标签使用相同效果

空格选择器：选中某个id内所有的某类元素,下图选中div元素下的所有P标签。

>选择器：直接选择div1下的，孙子不选

+选择器：和div是同一级的p直接都被选中。

属性选择器：和类选择等类似

选择器的优先级排序

important代表强制优先级提升。

规律：选择范围越小优先级越高

盒子模型

一、块元素block

块元素——div、p、h1-h6、ul、ol、li

所有的块级元素独占一行显示

可以设置宽高

二、行内元素inline

行内元素——span、a、font、strong、em、i

所有的行内元素都在一行上显示

不能设置宽高、由内容撑开

三、行内块inline-block

行内块——img、input

可以设置宽高、并且在一行上显示

默认对齐的是基线

<style>
        body{
            background-color: #eee;
        }

        li{
            float: left;
            list-style: none;
            width: 280px;
            height: 280px;
            margin: 10px;
            text-align: center;
            padding: 20px;
            background-color: #fff;
        }
        li img{
            width: 260px;

        }
        p{
            color: #707070;
            font-size: 20px;
        }


    </style>
</head>
<body>
    <h1>诱惑美食</h1>
    <ul>
        <li>
            <p>Country bread with dry figs</p>
            <img src="./images/1.jpg" alt="">
            <a href="#">Free Download</a>
        </li>
        <li>
            <p>Fruits</p>
            <img src="./images/2.jpg" alt="">
            <a href="#">Free Download</a>
        </li>
        <li>
            <p>Bell Pepper</p>
            <img src="./images/3.jpg" alt="">
            <a href="#">Free Download</a>
        </li>
        <li>
            <p>Oranges</p>
            <img src="./images/4.jpg" alt="">
            <a href="#">Free Download</a>
        </li>
        <li>
            <p>Healthy breakfast</p>
            <img src="./images/5.jpg" alt="">
            <a href="#">Free Download</a>
        </li>
        <li>
            <p>Homemade Cupcakes</p>
            <img src="./images/6.jpg" alt="">
            <a href="#">Free Download</a>
        </li>
        <li>
            <p>Strawberries</p>
            <img src="./images/7.jpg" alt="">
            <a href="#">Free Download</a>
        </li>
        <li>
            <p>Custard Croissant</p>
            <img src="./images/8.jpg" alt="">
            <a href="#">Free Download</a>
        </li>
    </ul>
</body>

难点：ul没有设置高度，高度为0，造成下标题紧接着块元素下边，导致乱码，设置高度700后，如果缩小窗口高度700又会造成乱码，所以高度应该随窗口变化。

  <style>
        .one {
            float: left;
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        .two {
            float: left;
            width: 300px;
            height: 300px;
            background-color: blue;
        }
        .erba {
            width: 600px;
            height: 200px;
            background-color: green;
        }
        .three {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="one"></div>
        <div class="two"></div>
        <!-- 通过第三个盒子将一行浮动效果固定下来，但却可以横向排列 -->
        <div class="three"></div>
    </div>
    <div class="erba"></div>
</body>

代码敲上天.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS简单使用

id选择器：为了方便使用是不允许重复，语法上允许，唯一的选择器，格式如下#+id。凡是html中的标签都可以进行选中，p代表标签中所有的p标签都遵从以上格式。空格选择器：选中某个id内所有的某类元素,下图选中div元素下的所有P标签。伪类就是一种特殊的类的形式，专门用于设置超链接点击前后等的样式状态。三种颜色表示方法：英文，16进制表示方法，RGB表示方法。标签选择器：标签可以直接使用，相同标签全部被选择格式如下。+选择器：和div是同一级的p直接都被选中。>选择器：直接选择div1下的，孙子不选。
复制链接

扫一扫