CSS

最新推荐文章于 2024-01-15 00:00:00 发布

阿鬼大大

最新推荐文章于 2024-01-15 00:00:00 发布

阅读量60

点赞数

分类专栏： javaWeb

本文链接：https://blog.csdn.net/weixin_50881929/article/details/115471081

版权

javaWeb 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS

快速入门

MyFirstCSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <!-- 规范,style可以编写CSS的代码，每一个声明，最好用分号结尾-->
    <style>
        h1 {
            color: red;
        }
    </style>
</head>
<body>
<h1>HelloWorld!</h1>
</body>
</html>

css三种导入方式

优先级：就近原则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    外部样式-->
    <link rel="stylesheet" href="style.css">
<!--    内部样式-->
    <style>
        h1{
            color:blue;
        }
    </style>
</head>
<body>
<!--行内样式，在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color:red;">HelloWorld!</h1>
</body>
</html>

拓展：外部样式的两种写法

链接式
html
导入式

css2.1特有的

@import url(style.css);

选择器

基本选择器

标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--        标签选择器会选择到这个页面上所有标签的元素-->
    <style>

        h1{
            color: blue;
            background: yellow;
            border-radius: 24px  ;
        }


    </style>
</head>
<body>
<h1> 阿鬼大大</h1>
<h1> 旭旭</h1>
<p> 王朝旭</p>
</body>
</html>

类选择器class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        类选择器的格式 .class的名称
        同一个选择器可以共用
        */
        .旭旭{
            color: blue;
        }
        .阿鬼{
            color: yellow;
        }
        .王朝旭{
            color: red;
        }
    </style>
</head>
<body>
<h1 class="阿鬼">标题1</h1>
<h1 class="旭旭">标题2</h1>
<h1 class="王朝旭">标题3</h1>
</body>
</html>

id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #a1{
            color: red;}
        #a2{
            color: yellow;}
    </style>
</head>
<body>
<h1 id="a1">标签1</h1>
<h1 id="a2">标签2</h1>
<h1 id="a3">标签3</h1>
<h1 id="a4">标签4</h1>
<h1 id="a5">标签5</h1>
</body>
</html>

层次选择器（了解）

1、后代选择器：

body p{
    background: red;
}

2、子选择器

3、相邻兄弟选择器

4、通用选择器

属性选择器（常用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p[id = "1"]{
            color: yellow;
        }
        p[class = "2.2"]{
        background: red;
        }
    </style>
</head>
<body>
<p id="1" class="1.1">标题1</p>
<p id="2" class="2.2">标题2</p>
<p id="3">标题3</p>
<p>标题4</p>
<p>标题5</p>
</body>
</html>

美化网页元素

字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        font-family:字体
        font-size:字体大小
        font-weight：粗细
        font-color：字体颜色
        */
        body{
            font-family: 楷体;
            color: red;
        }
        h1{font-size: 20px}
        .p1{
            font-weight: lighter;
        }
        span[id = "1"]{
            font-size: 50px;
        }
    </style>
</head>
<body>
<h1>介绍</h1>
<p class="p1">天赋异禀的结巴少年“秦风”警校落榜，被姥姥遣送泰国找远房表舅——号称“唐人街第一神探 ”，实则“猥琐”大叔的“唐仁“散心。不想一夜花天酒地后，唐仁沦为离奇凶案嫌疑人，不得不和秦风亡命天涯，穷追不舍的警探</p>
<p>——-“疯狗”黄兰登；无敌幸运的警察——“草包”坤泰；穷凶极恶、阴差阳错的“匪帮三人组”；高深莫测的“唐人街教父”；“美艳风骚老板娘”等悉数登场。七天，唐仁、秦风这对“欢喜冤家”、“天作之合”必须取长补短、同仇敌忾，他们要在躲避警察追捕、匪帮追杀、黑帮围剿的同时，在短短“七天”内，完成找到“失落的黄金”、查明“真凶”、为他们“洗清罪名”这些“逆天”的任务。</p>

欢迎来学 <span id="1">web</span>
</body>
</html>

文本样式

颜色
对齐方式
首行缩进
行高
装饰

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*颜色
        RGB:0-F
        RGBA:透明度
        text-decoration: underline;下划线
        text-decoration: line-through中划线
        text-decoration: line-overline上划线

        text-align:排版,居中
        text-indent:首行缩进

        */

        h1 {
            color: rgba(0, 255, 255, 0.5);
            text-align: center;
        }

        .p1 {
            text-indent: 2em;
            text-decoration: underline;

        }

        .p2 {
            background-color: red;
            height: 100px;
            line-height: 100px;
        }
    </style>
</head>
<body>
<h1>介绍</h1>
<p class="p1">天赋异禀的结巴少年“秦风”警校落榜，被姥姥遣送泰国找远房表舅——号称“唐人街第一神探 ”，实则“猥琐”大叔的“唐仁“散心。不想一夜花天酒地后，唐仁沦为离奇凶案嫌疑人，不得不和秦风亡命天涯，穷追不舍的警探</p>
<p class="p2">
    ——-“疯狗”黄兰登；无敌幸运的警察——“草包”坤泰；穷凶极恶、阴差阳错的“匪帮三人组”；高深莫测的“唐人街教父”；“美艳风骚老板娘”等悉数登场。七天，唐仁、秦风这对“欢喜冤家”、“天作之合”必须取长补短、同仇敌忾，他们要在躲避警察追捕、匪帮追杀、黑帮围剿的同时，在短短“七天”内，完成找到“失落的黄金”、查明“真凶”、为他们“洗清罪名”这些“逆天”的任务。</p>

欢迎来学 <span id="1">web</span>
</body>
</html>

超链接伪类

正常情况下 a,a:hover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #price{
            /*阴影颜色,水平偏移,竖直便宜,阴影半径*/
            text-shadow:blue 10px 10px 2px ;
        }
        a{
            text-decoration: none;
            color: blue;
        }
        /*鼠标悬浮状态,需要记住*/
        a:hover{
            color: red;
            font-size: 80px;
        }
        /*鼠标按住未释放的状态*/
        a:active{
            color: yellow;
        }

    </style>
</head>
<body>
<a href="#"> <img src="../../../../resource/photo/wjj.jpg" alt="">
</a>
<p>
    <a href="#">芦苇荡王景婕</a>
</p>
<p id = "price">
    $100
</p>
</body>
</html>

列表样式

.title {
    font-size: 50px;
    color: blue;
    text-indent: 1em;
    line-height: 50px;
    background: red;
}

/*    list-style
    none:去掉圆点
    circle:空心圆
    decimal:有序列表
    square:正方形
*/
ul li {
    height: 30px;
    list-style: square;
    text-decoration: none;
    background: #35d9c0;
}

a{
    color: yellow;
    text-decoration: none;
}
#nav{
    width: 500px
;
}

背景

背景颜色

背景图片

阿鬼大大

关注

0
点赞
踩
0

收藏

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

CSS快速入门MyFirstCSS<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS</title>  <style> h1 { color: red;
复制链接

扫一扫