CSS入门

言顶

已于 2022-07-07 10:36:09 修改

阅读量87

点赞数

分类专栏： css学习笔记文章标签： css html

于 2021-06-02 21:31:31 首次发布

本文链接：https://blog.csdn.net/qq_46066548/article/details/117483653

版权

css学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一.我的第一个CSS程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个CSS程序</title>
<!--规范 <style>可以在其中写CSS的代码,每一个声明最好使用 ; 结尾
  语法：
       选择器{
              声明1;
              声明2;
               ...
             }
  -->
    <link rel="stylesheet" href="/style.css">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>

二.css的导入方式

行内样式
内部样式
外部样式

<!DOCTYPE html>
<html lang="en">
<!--优先级：行内样式>内部样式>外部样式-->
<head>
    <meta charset="UTF-8">
    <title>index</title>
<!--内部样式    -->
    <style>

        h1{
            color: green;
        }
    </style>
<!-- 外部样式 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
<!--行内样式，在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: red">我是标签</h1>
</body>
</html>

h1{
    /*外部样式*/
    color: yellow;
}

扩张：导入式

<!--导入式    -->
    <style>
        @import url("style.css");
    </style>

三.基本选择器

标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器,会选择这个页面上所有这个标签的元素*/
        h1{
           color: green;
        }
        p{
            font-size:80px;
        }
    </style>
</head>
<body>
<h1>学习安卓</h1>
<h1>学习安卓</h1>
<p>在进一步</p>
</body>
</html>

类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--类选择器的格式： .class的名称{}-->
    <style>
    .wu{
        color: green;
    }
    .di{
        color: red;
    }
    </style>
</head>
<body>
<h1 class="wu">第一个</h1>
<h1 class="fa">第二个</h1>
<h1 class="di">第三个</h1>
</body>
</html>

id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--id选择器：id必须保证全局唯一
    #id名称{
    }
    -->
    <style>
        #wu{
            color: #405736;
        }
        .fa{
            color: red;
        }

    </style>
</head>
<body>
<h1 id="wu">标题1</h1>
<h1 class="fa">标题2</h1>
<h1 class="fa">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>

四.层次选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*p{background: aqua}*/
    /*后代选择器
        body p{
            background: red;
        }

     */
    /* 子选择器
        body>p{
            background: aqua;
        }

     */
    /*  相邻兄弟选择器: 只选择一个，向下选
        .activity+p{
            background: green;
        }

     */
    /*通用选择器 :当前元素选中的向下的所有兄弟元素   */
        .activity~p{
            background: antiquewhite;
        }
    </style>
</head>
<body>
<p class="activity">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>

</ul>
<p class="activity">p7</p>
<p>p8</p>

</body>
</html>

五.结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
/*ul第一个元素*/
ul li:first-child{
    background: red;
}
/*ul最后一个元素*/
ul li:last-child{
    background: green;
}
    /*选中p1:定位到父元素，选择当前的第一个元素
    p:nth-child(1) 选中当前p元素的父元素，选中父元素的第一个，并且是当前元素才生效（顺序）
    */
p:nth-child(3){
    background: aqua;
}
/*p:nth-of-type(1)
选中当前p元素的父元素下的p元素的第一个元素（类型）
*/
p:nth-of-type(1){
    background: green;
}
    </style>
</head>
<body>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>

</body>
</html>

六.属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: green;
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
    /* 属性名=属性值（正则）   */
    /* 存在id的元素   a[]{}
    a[id]{background : yellow}
    */

        /*id=last的元素
        a[id=last]{background: red}
        */


        /*class中有link的元素
         a[class*="link "]{
            background: aqua;
        }
        */

        a[href^="https:"]{
            background: aquamarine;
        }
        a[href$="doc"]{
            background: yellow;
        }
    </style>

</head>
<body>
<p class="demo">
    <a href="https://www.baidu.com" class="link item first" id="first">1</a>
    <a href="https://ww.123.com" class="link item"id="last">2</a>
    <a href="123.png"  class="link item">3</a>
    <a href="123.opg" class="link item">4</a>
    <a href="234.jpng" class="link item">5</a>
    <a href="wu.pdf" class="link item">6</a>
    <a href="wu.doc" class="link item">7</a>
    <a href="属性选择器.html" class="link item">8</a>
    <a href="https://www.bilibili.com/video/BV1YJ411a7dy?p=8&spm_id_from=pageDriver" class="link item">9</a>
    <a href="jing.doc" class="link item last">10</a>

</p>

</body>
</html>

七.属性

字体和样式

font-family 字体
font-size 大小
font-weight 粗细
color 颜色

颜色：

 单词
     RGB：0~F
     RGBA：A：0-1
   text-align: center;  排版：居中
   text-indent: 2em; 段内首行缩进
   行高与块高一致，就可以上下居中

划线
下划线：
text-decoration: underline;

中划线：
text-decoration: line-through;

上滑线：
text-decoration: overline;

 /*默认的状态*/
        a{
            text-decoration: none;
            color: #000000;
        }
        /*鼠标悬浮的状态*/
        a:hover{
            color: green;
            font-size: 50px;
        }
        /*鼠标按住未释放的状态*/
        a:active{
            color: red;
        }
        /*
        text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径;
        */
        #occupation{
            text-shadow: #620234 10px -10px 2px  ;
        }

言顶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS入门

一.我的第一个CSS程序<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>我的第一个CSS程序</title><!--规范 <style>可以在其中写CSS的代码,每一个声明最好使用 ; 结尾语法：选择器{ 声明1; 声明2;
复制链接

扫一扫