侧边栏壁纸
博主头像
coydone博主等级

记录学习,分享生活的个人站点

  • 累计撰写 306 篇文章
  • 累计创建 51 个标签
  • 累计收到 0 条评论

目 录CONTENT

文章目录

CSS

coydone
2022-02-01 / 0 评论 / 0 点赞 / 322 阅读 / 2,920 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-04-09,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

CSS技术介绍

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。作用:美化网页。

CSS2.0.chm

CSS语法规则

选择器{属性1:值1;属性2:值2}。如:

div{
    height: 0px;
    width: 0px;
}

CSS与HTML的结合方式

行内样式:通过标签的style属性来定义样式
<div style="border: 1px solid red;">div 标签 1</div>

内部样式:在head标签里用style标签来定义样式
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{border: 1px solid red;}
    </style>
</head> 

外部样式:通过link标签来引入外部样式
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
        <style type="text/css">
            .div2{
                height: 50px;
                width: 50px;
                background: blue;
            }
        </style>
        <style type="text/css">
            @import url("css/style.css");
        </style>
    </head>
    <body>
        <div class="div1" style="background: red; height: 50px; width: 50px;">内联</div>
        <div class="div2" >内部</div>
        <div class="div3">外部</div>
    </body>
</html>
<!--css包下的style.css文件中-->
.div3{
    width: 50px;
    height: 50px;
    background: green;
}

CSS选择器

标签名选择器

语法  :  
标签名  {
    属性名 :  属性值;  
    ...
}
p{color:red;} 

id选择器

在同一个页面,id是不能重复的,只能给唯一的一个标签使用。

语法  :      
#id属性名  {
    属性名   :   属性值;  
    ...
}
id="属性名"   

class选择器(类选择器)

在标签上添加 class属性,然后在style里面写选择器 (. 开头),更加精确的去控制样式。class名可以有多个。

语法 :       
.class属性名 {
	属性名:属性值;  
    ...
}
class="属性名"

组合选择器

组合选择器的格式是:
选择器 1,选择器 2,选择器 n{
    属性:值;
}

组合选择器可以让多个选择器共用同一个 css 样式代码。

常用样式

1、字体颜色 color:red;

颜色可以写颜色名如:black,blue,red,green 等。

颜色也可以写 rgb 值和十六进制表示值:如 rgb(255,0,0),#00F6DE,如果写十六进制值必 须加#。

2、宽度、高度width:19px; height:20px;

可以写像素值:19px; 也可以写百分比值:20%;

3、背景颜色

background-color:#0F2D4C;

4、字体样式

color:#FF0000;字体颜色红色font-size:20px;字体大小

5、边框

红色1像素实线边框border:1px solid red;

6、div居中

margin-left: auto; margin-right: auto;

7、文本居中

text-align: center;

8、超链接去下划线

text-decoration: none;

9、表格细线

table {
    border: 1px solid black; /设置边框/
    border-collapse: collapse; /将边框合并/
}
td,th {border: 1px solid black; /设置边框/ }

10、列表去除修饰

ul { list-style: none; }
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>06-css 常用样式.html</title>
        <style type="text/css">
            div {
                color: red;
                border: 1px yellow solid;
                width: 300px;
                height: 300px;
                background-color: green;
                font-size: 30px;
                margin-left: auto;
                margin-right: auto;
                text-align: center;
            }

            table {
                border: 1px red solid;
                border-collapse: collapse;
            }

            td {
                border: 1px red solid;
            }

            a {
                text-decoration: none;
            }

            ul {
                list-style: none;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>11111111111</li>
            <li>11111111111</li>
            <li>11111111111</li>
            <li>11111111111</li>
            <li>11111111111</li>
        </ul>
        <table>
            <tr>
                <td>1.1</td>
                <td>1.2</td>
            </tr>
        </table>
        <a href="http://www.baidu.com">百度</a>
        <div>我是 div 标签</div>
    </body>
</html>
0

评论区