新手学web之CSS快速了解及入门

最新推荐文章于 2024-10-08 23:45:40 发布

zero_1999

最新推荐文章于 2024-10-08 23:45:40 发布

阅读量693

点赞数 1

分类专栏： web基础文章标签： css html web

本文链接：https://blog.csdn.net/zero_1999/article/details/78095986

版权

web基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.1 CSS简介

层叠样式表
1.1.1 css使用的三种方式：

1）  在html标签的style属性中编辑
2）  在html的<head>内部使用<style>标签

示例：

<style>
        /*ID选择器*/
        #c{
            letter-spacing: 20px;
        }

        /*标签选择器*/
        a{
            color: black;
        }

        /*类选择器*/
        .abc{
            color: red;
        }

.test{
            Font-size: 18px;
        }
</style>
<a href="#" id="c" class="abc test">首页</a>

三种选择器的优先级：

ID选择器 ＞ 类选择器 ＞ 标签选择器

规则：

一个标签可以使用多个类修饰，但是只能有一个ID

3）使用外部 .css文件（推荐）

<link rel="stylesheet" href="css/index.css" />
注：三种CSS的编辑方式，以就近原则来显示

1.1.2 选择器扩展

a:hover{} 伪类选择器
div,p 同时选择<div>和<p>，二者是平行关系
div p 选择<div>标签内的<p>标签

1.1.3 伪类选择器

a:hover 鼠标悬停
a:link 未访问的样式
a:visited 已访问的样式
a:active 鼠标按下的样式（未松开）

1.2 常用属性

    1.2.1 文字修饰
        color颜色
        font-family字体
        font-size字体大小
        font-weight粗细
        letter-spacing字间距


    1.2.2 文本修饰
        text-indent 文字缩进
        text-align 对齐方式
        line-height 行高


    1.2.3 盒子模型
        外边距（margin）
            margin: 10px  20px  30px  40px; 上、右、下、左
            margin: 10px  20px  30px ; 上、左右、下
            margin: 10px  20px; 上下、左右
            margin: 10px; 四周

        边框（border）
            border-方位（bottom、top、left、right）
            border-style 边框的样式

        内边距（padding）
            参考外边距


    1.2.4 定位
        固定定位
        position：fixed；
        调整位置：top、left、right、bottom

        相对定位
        position: relative; 未脱离流布局；

        绝对定位
        position: absolute;  相对于最近的已定位的父元素，脱离流布局；


    1.2.5 层叠顺序
        z-index 值为数字，数字越大，层次越高；


    1.2.6 列表样式
        list-style: none; 取消列表样式


    1.2.7 元素溢出
        overflow: hidden; 溢出部分隐藏


    1.2.8 圆角
        border-radius:  值;  值可以为像素或百分比


    1.2.9 滚动
        <marquee >
          要滚动的文字或图片
        </marquee>


        常用属性：
            behavior：设定滚动的方式

            alternate： 表示在两端之间来回滚动

            scroll：表示由一端滚动到另一端，会重复。

            slide：表示由一端滚动到另一端，不会重复。

            direction：设定活动字幕的滚动方向up向上滚动，down向下滚动，left向左滚动，right向右滚动

            height：设定滚动字幕的高度

            width： 设定滚动字幕的宽度

            scrollamount：设定滚动速度，属性值为正整数，值越大滚动速度越快