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

详细讲解CSS基础知识点

亚连

发布： 2018-05-17 21:47:46

原创

1787人浏览过

一、概念

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/<a style='color:#f60; text-decoration:underline;' href="https://www.php.cn/zt/15716.html" target="_blank">css</a>">  
        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.属性选择器：标签名[属性='属性值']

文本：

/*属性选择器*/  
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中文网其它相关文章！

首页

PHP培训

视频教程

学习路径

资源下载

技术文章

社区

微信公众号

详细讲解CSS基础知识点