CSS

最新推荐文章于 2024-10-20 16:51:54 发布

ff_11111

最新推荐文章于 2024-10-20 16:51:54 发布

阅读量592

点赞数 2

分类专栏：网页文章标签： css

本文链接：https://blog.csdn.net/ff_11111/article/details/108352512

版权

网页专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.什么是CSS

CSS(Cascading Style Sheets):层叠样式表

作用：“美化”HTML （eg:字体、颜色、边距、高度、宽度、背景图片、网页定位····）
在这里插入图片描述
发展史：

CSS1.0：美化基本样式，eg:字体加粗(现标签可实现)···

CSS2.0 ：DIV+CSS HTML和CSS结构分离思想；简化网页；SEO(搜索引擎优化)

CSS2.1:网页浮动、定位··

CSS3.0：圆角边框，阴影，动画···；浏览器兼容性(包含以上版本功能)

2.CSS快速入门

style：
在这里插入图片描述
基本入门：

不建议但经常会使用(当代码较多时影响观感)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--    规范：style内编写css的代码；每一个声明后加分号;
        语法：
        选择器{
        声明1；
        声明2；
        ····
        }
-->
    <style>
        h1{
            color: deeppink;
        }
    </style>
</head>
<body>
<h1>这里是css基本入门</h1>
</body>
</html>

建议使用方式：
在这里插入图片描述

结果显示：在这里插入图片描述
CSS优势：

内容和表现分离
网页结构表现统一，可以实现复用
样式丰富(字体样式，颜色··)
建议使用独立于html的css文件
利用SEO，容易被搜索引擎收录

3.CSS的四种导入方式

1.行内样式：

<body>
<!--行内样式：直接在标签元素内编写style属性-->
<h1 style="color: deeppink">四种CSS导入方式</h1>
</body>

2.内部样式:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color: blue;
        }
    </style>
</head>

外部样式：

3.链接式(link):常用样式；html标签

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>

4.导入式(@import): 不经常使用，现在多用link标签取代

弊端：当一个网页代码过多时，通过浏览器显示时会先出现框架，再显现效果

<head>
    <meta charset="UTF-8">
    <title>Title</title> 	
	<style>
        @import url(css/style.css);
    </style>
</head>

优先级：秉持"就近原则"；哪一个样式离对应代码越近，哪一个越优先执行；行内样式最近

4.选择器

4.1三种基本选择器

标签选择器

<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style>
        /* 标签选择器：标签{}
        选择本网页内标签名相同的元素   eg:本页内所有的h1标签的元素字体都是粉色*/
        h4{
            color: deeppink;
        }
        p{
            color: brown;
        }
    </style>
</head>
<body>
<h4>这里是标签选择器1</h4>
<h4>这里是标签选择器2</h4>
<p>这里是标签选择器3</p>
</body>

显示效果：在这里插入图片描述

class(类)选择器

<head>
    <meta charset="UTF-8">
    <title>class选择器</title>


    <style>
           /*class选择器：.class名字{}
           作用范围：本网页内同一class名字的元素*/
        .selectname{
            color: darkorchid;
        }
    </style>
</head>
<body>
<h1 class="selectname">class选择器1</h1>
<h1>class选择器2</h1>
<h1 class="selectname">class选择器3</h1>
</body>

显示效果：在这里插入图片描述

id选择器

<head>
    <meta charset="UTF-8">
    <title>ID选择器</title>
    <style>
        /*id选择器：#id名{}
        id选择器范围：id全局唯一，不能重复*/
        #idname1{
            color: yellow;
        }
        #idname2{
            color: blue;
        }
    </style>
</head>
<body>
<h2 id="idname1">id选择器1</h2>
<h2 id="idname2">id选择器2</h2>
<h2>id选择器3</h2>
</body>

显示效果：在这里插入图片描述

三者之间的优先级：id选择器>class选择器>标签选择器

4.2高级选择器

4.2.1后代选择器

<head>
    <meta charset="UTF-8">
    <title>族谱</title>
    <style>
         /*后代选择器 :body p{} (p是举例标签，可改成其他)
        作用范围：body内的所有p标签的元素都改变；*/
        body p{
            color: blue;
        }
    </style>
</head>
<body>
<p>祖爷爷</p>
<p>爷爷</p>
<ul>
    <p>伯伯</p>
    <p>爸爸
        <ul>
            <p>哥哥</p>
            <p>姐姐</p>
            <p>弟弟</p>
        </ul>
    </p>
    <p>叔叔</p>
</ul>

显示结果：在这里插入图片描述

4.2.2子选择器

<head>
    <meta charset="UTF-8">
    <title>子代选择器</title>
    <style>
        /*子代选择器：body>p{}
        作用范围：body后的第一代p标签*/
        body>p{
            color: red;
        }
    </style>
</head>
<body>
<p>爷爷</p>
<ul>
    <p>伯伯</p>
    <p>爸爸
        <ul>
    <p>哥哥</p>
    <p>姐姐</p>
    <p>弟弟</p>
</ul>
</p>
<p>叔叔</p>
</ul>
</body>

作用效果：在这里插入图片描述

4.2.3相邻兄弟选择器

<head>
    <meta charset="UTF-8">
    <title>相邻选择器</title>
    <style>
        /*兄弟相邻选择器：class名字+p{}
        作用范围：当前选中class元素相邻(向下)的一个兄弟p标签元素*/
        .uncle+p{		/*爸爸和二叔叔变蓝*/
            color: blue;
        }
    </style>
</head>
<body>
<p>爷爷</p>
<ul>
    <p class="uncle">伯伯</p>
    <p>爸爸
        <ul>
    <p>哥哥</p>
    <p>姐姐</p>
    <p>弟弟</p>
</ul>
</p>
<p class="uncle">叔叔</p>
<p>二叔叔</p>
</ul>
</body>

作用效果：在这里插入图片描述

4.2.4通用选择器

<head>
    <meta charset="UTF-8">
    <title>通用选择器</title>
    <style>
       /*通用选择器：class~p{}
       作用范围：当前选中class元素之下的所有兄弟p标签元素*/
        
		.uncle~p{       /*爸爸、叔叔和二叔叔变红*/
            color: red;
        }
        .brother~p{     /*姐姐和弟弟变青*/
            color: aquamarine;
        }
    </style>
</head>
<body>
<p>爷爷</p>
<ul>
    <p class="uncle">伯伯</p>
    <p>爸爸
        <ul>
    <p class="brother">哥哥</p>
    <p>姐姐</p>
    <p>弟弟</p>
</ul>
</p>
<p class="uncle">叔叔</p>
<p>二叔叔</p>
</ul>
</body>

作用效果：在这里插入图片描述

4.3结构伪类选择器

<head>
<meta charset="UTF-8">
<style>
       /*带‘:’的都是伪类
        ul li:first-child 精准定位到ul 里li 的第一个元素
         ul li:last-child 精准定位到ul 里li 的最后一个元素*/
        ul li:first-child{  /*选中伯伯和哥哥*/
         color: red;
        }
        ul li:last-child{ /*选中弟弟和二叔叔*/
            color :blue;
        }
</style>
</head>
<body>
    <p>爷爷</p>
<ul>
    <li>伯伯</li>
    <li>爸爸
        <ul>
    <li>哥哥</li>
    <li>姐姐</li>
    <li>弟弟</li>
</ul>
</li>
<li>叔叔</li>
<li>二叔叔</li>
</ul>
</body>

作用效果：在这里插入图片描述

<head>
<meta charset="UTF-8">
<style>
/*选中某一p元素：p:nth-child(n)  n为所选元素到父级的距离（行数）
    定位到父元素（body）,在选择从上至下的第一个p标签元素
       （上去再下来）*/
    p:nth-child(1){			/*选中爷爷*/
        color :blue;
    }
        /*p:nth-of-type(n):按类型选
        父元素下的p元素的第n个
        */
        p:nth-of-type(2){     /*选中二爷爷*/
            color: red;
        }
    </style>
</head>
<body>
    <p>爷爷</p>
<ul>
    <li>伯伯</li>
    <li>爸爸
        <ul>
    <li>哥哥</li>
    <li>姐姐</li>
    <li>弟弟</li>
</ul>
</li>
<li>叔叔</li>
<li>二叔叔</li>
</ul>
    <p>二爷爷</p>
</body>

作用效果：在这里插入图片描述

4.4属性选择器（常用）

<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        .demo a{
            float: left;
            display: block;
            height: 40px;
            width: 40px;
            border-radius: 10px;
            background: black;
            text-align: center; /*文本居中*/
            text-decoration: none; /*下划线*/
            color: yellowgreen; /*文字颜色*/
            margin-right: 5px;
        }
    </style>
</head>
<body>
<p class="demo">
    <a href="http://www.baidu.com" class="links item first" title="suspond" id="first">1</a>
    <a href="http://abc.com" class="links"  target="_blank">2</a>
    <a href="3.jpg" class="links" target="_blank">3</a>
    <a href="4.jpg" class="links">4</a>
    <a href="../5.pdf" class="links" target="_blank">5</a>
    <a href="../5/doc"class="links">6</a>
    <a href="a.html" class="links item last" id="second">7</a>
</p>
</body>

展示效果：在这里插入图片描述

选中存在id属性的元素

 /* 1.   存在id属性的元素：a[]{}*/
        a[id]{          /*有id的a标签元素变红 eg:1 7*/
            background: red;
        }
        /* 2.    a[id=属性值]{}  :指定id为属性值的元素改变   属性值可为正则表达式*/
        a[id=first]{        /*选中id为first的元素（1）变蓝*/
            background:blue;
        }

显示效果：在这里插入图片描述

选择class中带有某一标签的元素

/*    选中class中的某一标签的元素： a[class*=标签名]{} */
    /*    选中class中由link标签的元素*/
        a[class*=links]{ /*1,2,3,4,5,6,7*/
            background: red;
        }

显示效果：在这里插入图片描述

选中herf属性中以某一内容为开头的元素和一某一内容结尾的元素

  /*    选中herf属性中以http开头的元素：  a[href^=http]{} */
        a[href^=http]{
            background: yellow;  /*http开头的元素背景变黄：1,2*/
        }
    /*    选中herf属性中以pdf结尾的元素：  a[href$=pdf]{}*/
        a[href$=pdf]{
            background: red;     /*pdf结尾的元素背景变红：5 */
        }

显示效果：在这里插入图片描述

常用正则表达式含义：

= 绝对等于

*= 包含等号右侧元素

^= 以此元素开头

$= 以此结尾

5.美化网页元素

5.1span标签：突出一句话中重点的字，约定俗成用是span标签

<head>
    <meta charset="UTF-8">
    <title>span</title>
    <style>
    #java11{   
        font-size: 25px;
        color: blue;
    }
    </style>
</head>
<body>
<p>
    一起学习 <span id="java11">Java</span>吧
</p>
</body>

显示效果：在这里插入图片描述

5.2字体样式

1.分散：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            font-family: 楷体; /*font-family:字体样式*/
            color:blue;		/*color:字体颜色*/
        }
        h1{
            font-size: 30px; /* font-size:字体大小*/
        }
        .p1{
            font-weight: bolder; /* font-weight:字体粗细(bolder,bold,lighter,n px···)*/
        }
    </style>
</head>
<body>
<h1>
    《哆啦A梦》
</h1>
<p >（日语：ドラえもん；英语：Doraemon；旧译叮当 / 小叮当）是由日本漫画家藤本弘（笔名藤子·F·不二雄）创作的漫画。漫画叙述了一只来自22世纪的猫型机器人——哆啦A梦，受主人野比世修的托付，回到20世纪，借助从四维口袋里拿出来的各种未来道具，来帮助世修的高祖父——小学生野比大雄化解身边的种种困难问题，以及生活中和身边的小伙伴们发生的轻松幽默搞笑感人的故事。
</p>
<p class="p1">作品自1970年1月开始在《小学1-4年级生》杂志中开始连载，并且大受小学生欢迎。《哆啦A梦》系列的篇幅浩繁，由原作者亲自执笔的短篇漫画共1345回（分为45卷单行本），大长篇漫画16回，《哆啦A梦Plus》6卷，在藤本弘去世后，又由其弟子创作了大量漫画，至今仍有新作品在不断推出。
</p>
</body>

显示效果：在这里插入图片描述

2.一步到位：

<style>
        /*font(字体风格):字体样式（斜体，粗体··） 粗细 字体大小 字体形式*/
        p{
            font:  oblique bolder 15px "楷体";
            color: blue;
        }
    </style>
</head>
<body>
<h1>
    《哆啦A梦》
</h1>
<p >（日语：ドラえもん；英语：Doraemon；旧译叮当 / 小叮当）是由日本漫画家藤本弘（笔名藤子·F·不二雄）创作的漫画。漫画叙述了一只来自22世纪的猫型机器人——哆啦A梦，受主人野比世修的托付，回到20世纪，借助从四维口袋里拿出来的各种未来道具，来帮助世修的高祖父——小学生野比大雄化解身边的种种困难问题，以及生活中和身边的小伙伴们发生的轻松幽默搞笑感人的故事。
</p>
<p class="p1">作品自1970年1月开始在《小学1-4年级生》杂志中开始连载，并且大受小学生欢迎。《哆啦A梦》系列的篇幅浩繁，由原作者亲自执笔的短篇漫画共1345回（分为45卷单行本），大长篇漫画16回，《哆啦A梦Plus》6卷，在藤本弘去世后，又由其弟子创作了大量漫画，至今仍有新作品在不断推出。
</p>
</body>

显示效果：在这里插入图片描述

5.3文本样式

5.3.1颜色：

<style>
        /*颜色：
           1.单词（red,blue``）
           2.RGB(Red,Green,Blue) 0~F  红：#ff0000 绿：#00ff00 黄：#0000ff
           3.RGBA :  A:0~1 (透明度)
        */
        h1{
            /*color:#00ff00;*/
            color: rgba(100,255,255,0.5);  
        }
    </style>

显示效果：在这里插入图片描述

5.3.2.文本对齐方式、首行缩进、行高：

  <style>
        h1{
            /*color:#00ff00;*/
            color: rgba(100,255,255,0.5);
            text-align: center;
        }
    /*  文本：
     text-align:center 排版（center，right，left）
     text-indent: 2em   首行缩进2格
     height:块的高度
     line-height:行高
    */
        .p1{
            background: olivedrab;
            text-indent: 2em;
            height: 100px;
            line-height: 50px;
        }
    </style>

显示效果：在这里插入图片描述

5.3.3.上、中、下划线和去除超链接(a)的下划线

<style>
/*    上、中、下划线*/
        .l1{
            text-decoration: overline;
        }
        .l2{
            text-decoration: line-through;
        }
        .l3{
            text-decoration:underline ;
        }
    /*去除超链接的下划线 text-decoration:none*/
        a{
            text-decoration: none;
        }

    </style>
</head>
<body>
<a href="">超链接</a>  
<p class="l1">这里是上划线</p>
<p class="l2">这里是中划线</pclass>
<p class="l3">这里是下划线</p>
</body>

显示效果：在这里插入图片描述

5.3.4不同元素参照对齐(eg:图片与文本)

<head>
<style>
 /*图片与文字水平对齐    参照图片对齐*/
        img,span{
            vertical-align: top;
        }
    </style>
</head>
<body>

<p>
    <img src="image/图片.png" alt="">
    <span>将图片和这行字保持水平</span>
</p>
    </body>