详细讲解CSS基础知识点-php教程-PHP中文网

首页

后端开发

php教程

详细讲解CSS基础知识点

亚连

May 17, 2018 pm 09:47 PM

css基础

一、概念

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

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

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

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

多个属性用英文分号隔开

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

样式选择器如下：

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

二、引入CSS样式

1.行内样式

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

2.内部样式

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

3.外部样式

引用外部样式：

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

CSS文件设置：

/*font样式设置*/

font{  
    color:green;  
}

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

三、选择器

1.元素选择器

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

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

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

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

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

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

文本：40f334922989b3d8b366ca8c98348e79

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

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

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

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

四、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实现的一张图完成的按钮实例

以上是详细讲解CSS基础知识点的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

PHP的当前状态：查看网络开发趋势Apr 13, 2025 am 12:20 AM

PHP在现代Web开发中仍然重要，尤其在内容管理和电子商务平台。1)PHP拥有丰富的生态系统和强大框架支持，如Laravel和Symfony。2)性能优化可通过OPcache和Nginx实现。3)PHP8.0引入JIT编译器，提升性能。4)云原生应用通过Docker和Kubernetes部署，提高灵活性和可扩展性。

PHP与其他语言：比较Apr 13, 2025 am 12:19 AM

PHP适合web开发，特别是在快速开发和处理动态内容方面表现出色，但不擅长数据科学和企业级应用。与Python相比，PHP在web开发中更具优势，但在数据科学领域不如Python；与Java相比，PHP在企业级应用中表现较差，但在web开发中更灵活；与JavaScript相比，PHP在后端开发中更简洁，但在前端开发中不如JavaScript。

PHP与Python：核心功能Apr 13, 2025 am 12:16 AM

PHP和Python各有优势，适合不同场景。1.PHP适用于web开发，提供内置web服务器和丰富函数库。2.Python适合数据科学和机器学习，语法简洁且有强大标准库。选择时应根据项目需求决定。

PHP：网络开发的关键语言Apr 13, 2025 am 12:08 AM

PHP是一种广泛应用于服务器端的脚本语言，特别适合web开发。1.PHP可以嵌入HTML，处理HTTP请求和响应，支持多种数据库。2.PHP用于生成动态网页内容，处理表单数据，访问数据库等，具有强大的社区支持和开源资源。3.PHP是解释型语言，执行过程包括词法分析、语法分析、编译和执行。4.PHP可以与MySQL结合用于用户注册系统等高级应用。5.调试PHP时，可使用error_reporting()和var_dump()等函数。6.优化PHP代码可通过缓存机制、优化数据库查询和使用内置函数。7