详细讲解CSS基础知识点-tutorial php-php.cn

详细讲解CSS基础知识点

亚连

Lepaskan： 2023-03-26 12:14:02

asal

1980 orang telah melayarinya

一、概念

CSS(Cascading Style Sheets)：CSS样式后层叠样式表，层叠：使用不同的添加方式给同一个HTML标签添加样式，所有样式共同作用于该标签；样式：给HTML标签添加需要显示的效果。

主要用于设置HTML页面中的文本内容、图片外形以及版面的布局等外观显示样式。

作用：CSS使页面更美观；CSS+Div使布局更灵活。

规则：样式选择器严格区分大小写，但属性和属性值不区分

多个属性用英文分号隔开

若属性值由多个单词组成，用英文引号括住

样式选择器如下：

<font style="color:red;size:14;"></font>

Salin selepas log masuk

二、引入CSS样式

1.行内样式

<body>  
    <!--行内样式-->  
    <font style="color:red">浅笑安然</font><br />  
</body>

Salin selepas log masuk

2.内部样式

<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <!--内部样式-->  
    <style type="text/css">  
        font{  
            color: red;  
        }  
    </style>  
</head>

Salin selepas log masuk

3.外部样式

引用外部样式：

<head>  
        <!--外部样式-->  
    <link rel="stylesheet" type="text/css" href="../css/outer.css"/>  
</head>

Salin selepas log masuk

CSS文件设置：

/*font样式设置*/

font{  
    color:green;  
}

Salin selepas log masuk

优先级：行内样式优先级最高，内部样式和外部样式就近原则

三、选择器

1.元素选择器

<font >浅笑安然</font>  
[html] view plain copy
/*元素选择器*/  
font{  
    color: red;  
}

Salin selepas log masuk

2.ID选择器：#id名{}

<font id="flower">心若浮沉</font>  
[html] view plain copy
/*ID选择器*/  
#flower{  
    color: blue;  
}

Salin selepas log masuk

3.类选择器：.class类名{}

<font class="happy">清风自来</font>  
[html] view plain copy
/*类选择器*/  
.happy{  
    color:gold;  
}

Salin selepas log masuk

4.属性选择器：标签名[属性='属性值']

文本：

/*属性选择器*/  
input[type=text]{  
    background-color: brown;  
}

Salin selepas log masuk

5.包含选择器：父代标签子代标签

<p class="day">  
    <font>  
        今天天气好晴朗  
    </font>  
</p>

Salin selepas log masuk

/*包含选择器*/  
.day font{  
    color:orangered;  
}

Salin selepas log masuk

四、CSS样式

1.border width heigh

2.display：block块级属性 inline行级属性 none隐藏属性 inline-block：在行里的块级元素，有宽度
块级元素p ；行级元素span

3.字体：color font-size background-color

4.float：浮动 clear：清楚浮动

五、盒子模型

margin：外边距，盒子与盒子，顺时针设置，若没有设置则按其对称来

border：边框线

padding：内边距，盒子与内容

盒子模型就是我们常用的盒子，现实生活中它既有自己的边框厚度，有与里面物体的间隔，也有盒子本身与外界的距离。

小结：

CSS层叠样式就是多种样式叠加到一起，共同作用于该标签，无论是选择器的使用，还是属性设置以及盒子模型的运用，根本都是为了改变HTML页面的样式，多种力量作用产生美观页面的效果。

PHP动态压缩js与css文件步骤详解

JS+CSS3实现鼠标与图片互动放大效果

用CSS实现的一张图完成的按钮实例

Atas ialah kandungan terperinci 详细讲解CSS基础知识点. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

详细讲解CSS基础知识点