CSS

最新推荐文章于 2022-08-09 10:53:10 发布

TANGCHAO3000

最新推荐文章于 2022-08-09 10:53:10 发布

阅读量162

点赞数

本文链接：https://blog.csdn.net/TANGCHAO3000/article/details/103761043

版权

概述

为什么使用css

避免重复
更容易维护
为不同的目的，使用不同的样式而内容相同

CSS的基础语法

选择器{
声明1；
声明2；
...
}

Style标签

Style 标签在HTML文档中的位置，在<head 和 </head之间
案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color: rgba(224, 183, 134, 0.69);
        }
        h2{
            font-size: 200px;
        }
    </style>

</head>
<body>
<h1>你是谁啊</h1>
<h2>我是你爸爸</h2>
</body>
</html>

引入CSS的方式

行内样式
使用style属性引入CSS样式
秦
内部样式表
CSS代码写在<head的<style标签中
外部样式表
链接式
导入式
案例:

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

    <!--内部样式表
    需要使用style标签
    格式 :

        选择器 {
              属性 : 属性值
        }

    -->
    <style>
        a{
            font-size: 50px;
        }

    </style>




</head>
<body>

<!--行内样式
style属性引入 ,
行内样式如果要添加多个样式 , 中间使用分号隔开
-->
<h1 style="color: #96ffe6">Hello,css</h1>
<p style="color: #ff5f5d;font-weight: bold">Hello,css</p>

<p>Hello,css</p>

<hr/>


<a href="">Goodbye,world</a>




</body>
</html>

css优先级

行内样式 > 内部样式表 > 外部样式表

案例：

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


    <link rel="stylesheet" href="resources/css/Style.css">


    <style>
        span{
            color: blue;
            font-family: 楷体;
        }
    </style>


</head>
<body>



<span style="color: green">

    IT梦想

</span>




</body>
</html>

css选择器

标签选择器
uHTML标签作为标签选择器的名称
<h1…<h6、<p、<img/
类选择器

类选择器
<标签名 class= “类名称”>标签内容</标签名>

案例：

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

    <style>

        /*   类选择器
         思考 : 需要一类 ?  类在标签中定义, 使用class属性
          然后使用类选择器选择到指定的标签元素

          .类名称{
               属性:属性值
          }

        */

        .a{
            font-family: 宋体;
        }

        .b{
            font-style: italic;
        }

    </style>

</head>
<body>


<p class="a">来西部开源</p>
<a href="" class="a">成就IT梦想</a>
<div class="a">好好学习,天天向上</div>
<span class="b">cool</span>
<br>
<qinjiang class="b">你好啊</qinjiang>


</body>
</html>

ID 选择器

案例：

<标签名 id = “id名称”>标签内容</标签名>

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

    <style>


        /*id属性全局唯一 , 不能同名*/
        /*ID选择器
        需要一个iD --> 在标签中定义ID
        格式:

        #id名字{

        }

        */

        #goods{
            font-size: 200px;
        }

        #aaa{
            color: yellow;
        }


    </style>


</head>
<body>


<p class="a" id="aaa">1</p>
<a href=""  class="a">2</a>
<div  class="a">3</div>
<span  class="a" id="goods">4</span>



</body>
</html>

总结

标签选择器直接应用于HTML标签
类选择器可在页面中多次使用
ID选择器在同一个页面中只能使用一次

基本选择器的优先级

ID选择器>类选择器>标签选择器
基本选择器不遵循 “ 就近原则 "

css常用样式

文字样式

color	颜色
font-size	字体大小
font-weight	文字粗细
font-family	字体集
font	在一个声明中设置字体所有属性

文本样式

color	颜色
text- align	文字对齐
text- decoration（none）	文字装饰
text-indent	首行缩进
line-height	行高

案例：

#author{
    font-family: 楷体;
}

#time{
    font-style: italic;
}

/* text-indent文本首行缩进 */
.sj{
    text-indent: 2em;
}

h1{
    text-shadow: aqua -1px 1px 10px;
}

  

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

    <link rel="stylesheet" href="resources/css/Style2.css">

</head>
<body>


<!--
px  ->像素
em  ->字符
-->



<h1>公司简介</h1>

<p>发布人: <span id="author">阿里</span>  &nbsp; &nbsp; &nbsp; &nbsp;  时间: <span id="time">20119-01-01</span></p>

<p>阿里技术中心是一家集教育培训、人才服务、服务外包、企业定制为一体的综合性软件技术服务机构。</p>

<p class="sj">公司成立十年以来，全心全意致力于“Linux&C、C++开发工程师”、“Linux系统运维工程师及运维研发工程师”、“Web前端开发工程师”、“Java开发工程师”的培训，以及C++开发、云计算、虚拟化、python自动化运维等综合性企业级职业技能培训。公司持续深耕主校区，并在各个大学开设分校区与咨询网点，借助高校区位优势，专注于Linux技术的培训，为大学毕业生开辟更为广泛的就业途径。
</p>　　

<p class="sj">公司拥有一支专业进取的教学师资团队，具有丰富的行业经验，参加过众多政府重大电子信息工程项目的研发。公司还具备体系完整并不断更新的独家课程体系和配套的题库考试系统，为学员学习保驾护航。经过十年的教育培训历程，公司已为腾讯、阿里、百度、京东、搜狐、新浪等一线互联网企业输送技术精英2000余人，得到用人单位和结业学员的一致好评。
</p>
　　

</body>
</html>

网页背景

背景颜色
background-color
背景图片
background-image
背景定位
background-position属性
背景重复方式
background-repeat
简写
background
background:#C00 url(…/image/kuangshen.jpg) 205px 10px no-repeat;
案例：

body{
    background-image: url("../../resources/image/1.png");
    background-repeat: no-repeat;
}

    1
    2
    3
    4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="resources/css/Style5.css">
</head>
<body>




</body>
</html>

TANGCHAO3000

关注

0
点赞
踩
0

收藏

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

概述为什么使用css避免重复更容易维护为不同的目的，使用不同的样式而内容相同CSS的基础语法选择器{声明1；声明2；...}Style标签Style 标签在HTML文档中的位置，在<head 和 </head之间案例：<!DOCTYPE html><html lang="en"><head> &l...
复制链接

扫一扫