博客列表 >CSS的基础知识 - PHP培训九期线上班

CSS的基础知识 - PHP培训九期线上班

SmileHoHo
SmileHoHo原创
2019年10月31日 15:18:35547浏览

一. 元素按显示方式分为哪几种, 并举例, 正确描述它们
答:元素按显示方式分为块状元素和内联元素

块状元素
1.块状元素在网页中就是以块的形式显示,所谓块状就是元素显示为矩形区域,常用的块状元素包括div,dl,dt,dd,ol,ul,fieldset,(h1~h6),p,form,hr,iframe,colgroup,col,table,tr,td等等;
2.默认情况下,块状元素都会占据一行,通俗地说,两个相邻块状元素不会出现并列显示的现象;默认情况下,块状元素会按顺序自上而下排列
3.块状元素都可以定义自己的宽度和高度
4.块状元素一般都作为其他元素的容器,它可以容纳其他内联元素和其他块状元素。我们可以把这种容器称为一个盒子。

内联元素
1.常见的内联元素如:a,span,i,em,strong,b等等
2.内联元素的表现形式是始终以行内逐个进行显示
3.内联元素没有自己的形状,不能定义它的宽和高,它显示的高度和欢度只能根据所包含内容的高度和宽度来确定,它的最小内容单元也会呈现矩形形状;
4.内联元素也会遵循盒模型基本规则,如可以定义padding,border,magrin,background等属性

二. CSS是什么? 它的主要作用是什么?
答:CSS全称为Cascading Style Sheets(层叠样式表),中文翻译为“层叠样式表”,简称CSS样式表。它是一种用来表现HTML或 XML 等文件式样的计算机语言。
在网页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。
CSS的作用:CSS具有对网页的布局、颜色、背景、宽度、高度、字体进行控制,让网页按您的美工设计布局的更加美观漂亮。
三. 什么是CSS选择器,它的样式声明是哪二部分组成?
CSS3 选择器  在CSS 中,选择器是一种模式,用于选择需要添加样式的元素。
它的样式声明是由属性和属性值两部分组成
例如:

<style type="text/css">
声明{ 属性: 值;}
</style>

四. 举例演示CSS简单选择器(全部)
常用的简单选择器有5种:
1.元素选择器: div {...}
2.属性选择器: tag[property...]
3.类/class选择器: .active {...}
4.ID选择器: #style {...}
5.群组选择器: p, .active, div {...}
通配符选择器: *, 表示全部元素, 通常用在上下文选择器

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS简单选择器</title>
    <style type="text/css">
        /*标签选择器*/
        h2{
            color: red;
        }
        span{
            background: burlywood;
            color: cadetblue;
        }
        /*.类选择器*/
        .style1{
            font-size: 20px;
            color: green;
            background:blue;
        }
        .style2{
            background: rebeccapurple;
            font-size: 16px;
            color: white;
        }
        /*ID类选择器*/
        #style3{
            font-size: 23px;
            background: darkgrey;
        }
        /*属性选择器*/
        p[class]{
            background: green;
            color: white;
            font-size: 24px;
        }

        /*伪类选择器*/
        a:link{font-size: 30px;color:yellow;} /*打开网页时标签为黄色*/
        a:hover{font-size: 30px;color:green;}  /*将鼠标放在标签上时标签为绿色*/
        a:active{font-size: 30px;color:blue;}  /*点击标签时标签为蓝色*/
        a:visited{font-size: 30px;color:red;}  /*点击后标签为红色*/

    </style>
</head>
<body>
 <section>
        <h2>CSS简单选择器</h2>
        <p class="style1">她年轻时迷死一大片男人,却不结婚不生子,<span>今39岁甜的像个水蜜桃</span></p>
        <p class="style1">最近一对农村男女相亲火了,被网友称为最朴实最美好的相亲</p>
        <p class="style2">直击北京故宫航拍照:尽显皇家威严,却被现代化的建筑步步紧逼</p>
        <p id="style3">其实在唐僧的三个徒弟中,猪八戒实力垫底,<span>孙悟空也不一定排第一</span></p>
        <a href="https://www.php.cn" target="_blank">PHP中文网</a>
 </section>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

简单1.jpg

简单2.jpg

五. 举例演示CSS上下文选择器(全部)
所谓上下文, 是指元素之间的结构关系,如层级,包含等,主要有四个选择器
后代选择器: 空格, 如 section p
父子选择器: >, 如 section > h2
同级相邻选择器: +, 如 h2 + p
同级所有选择器: ~, 如 h2 ~ a
通配选择器:*  如 section * a

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS-上下文选择器</title>
    <style type="text/css">
        /*后代选择器*/
        section  p{
            font-size: 20px;
            color: darkgrey;
        }
        /*标签1 > 标签2
        标签2必须是标签1的子元素。与其他常规的上下文选择符不同,这个选择符中的标签1不能使标签2的父元素之外的其他祖先元素*/
        section > h2 {
            font-size: 30px;
            color: green;
        }

        /*  紧邻同胞选择符 +
        标签1 + 标签2
        标签2必须紧跟在其同胞标签1的后面  */
        h2 + p {
            background: #7a3dff;
        }
        /*一般同胞选择符 ~
        标签1 ~ 标签2
        标签2必须在(不一定紧挨着)其同胞标签1后面*/
        h2 ~ a{
            font-size: 26px;
            color: darkslategray;
        }
        /*通配选择符 *  适用于section的非子元素a
        *(常称为星号选择符)是一个通配符,它匹配任何元素*/

        section * a{
            color: blue;
            font-size: 50px;
        }
    </style>
</head>
<body>
 <section>
        <h2>CSS-上下文选择器</h2>
        <p>她年轻时迷死一大片男人,却不结婚不生子,今39岁甜的像个水蜜桃</p>
        <p>最近一对农村男女相亲火了,被网友称为最朴实最美好的相亲</p>
        <p>直击北京故宫航拍照:尽显皇家威严,却被现代化的建筑步步紧逼</p>
        <p>其实在唐僧的三个徒弟中,猪八戒实力垫底,<a href="https://www.php.cn" target="_blank">PHP中文网</a></p>
        <a href="https://www.html.cn" target="_blank">HTML中文网</a>
 </section>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

 上下.jpg

 

 

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS上下文选择器</title>
    <style type="text/css">
        em{
            color: red;
            font-size: 50px;
        }
        article li em{
            color: blue;
            font-size:20px;
        }
        aside li em{
            color: chocolate;
            background: darkgrey;
            font-size: 20px;
        }
    </style>
</head>
<body>
 <article>
     <div class="main">
         <h2><em>CSS</em>上下文选择器</h2>
         <ul>
             <li>她年轻时迷死一大片男人,却不结婚不生子,今39岁甜的像个水蜜桃</li>
             <li>最近一对农村男女相亲火了,被网友称为最朴实最美好的相亲</li>
             <li>直击北京故宫航拍照:<em>尽显皇家威严</em>,却被现代化的建筑步步紧逼</li>
         </ul>
     </div>
 </article>
<aside>
    <ul>
        <li>最近昆凌出席活动的时候,穿了一件黑色的开叉长裙,轻松展现出曼妙性感的好身材</li>
        <li>S型的身材曲线让人看完之后心动不已,一点都不像是已经生了两个孩子的人</li>
        <li>其实在唐僧的三个徒弟中,<em>猪八戒实力垫底</em>,孙悟空也不一定排第一</li>
    </ul>
</aside>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

 上下文.jpg

六. 举例演示常用CSS结构伪类选择器(不少于四种)
:nth-child(n)是最主要的非限定类型,其它四个只是它的某种行为快捷方式
:nth-child(n): 匹配父元素中指定索引的子元素
:first-child: 匹配父元素中的第一个子元素
:last-child: 匹配父元素中的最后一个子元素
:nth-last-child(n): 匹配从父元素中倒数选择子元素
:only-child: 匹配父元素中的唯一子元素


实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用CSS结构伪类选择器</title>
    <style type="text/css">
        /*结构伪类选择器,可以根据元素在文档中所处的位置,来动态选择元素,从而减少HTML文档对ID或类的依赖,有助于保持代码干净整洁。*/
        /*:nth-of-type(n) 与 :nth-child(n) 的作用和使用方法完全相同,唯一不同的是,它用来选择某个父元素下,指定类型的一个或多个特定的子元素。*/
        section ul li:first-child{/*选择第1个li*/
            color: red;
            font-size: 20px;
        }
        section ul li:last-child{/*选择最后一个li*/
            color: #3ad4ff;
            background: darkgrey;
            padding: 10px;
        }
        section ul li:nth-child(3){/*选择第3个li*/
            font-size: 20px;
            color: blue;
        }
        section ul li:nth-child(4){/*选择第四个li*/
            background: green;
            color: white;
        }
        section ul li:nth-last-child(2){/*选择倒数第二个li*/
            color: chocolate;
            background: aquamarine;
        }
        section ul li:nth-of-type(5){
            background: black;
            color: white;
        }
    </style>
</head>
<body>
 <section>
        <h2>常用CSS结构伪类选择器</h2>
     <ul>
         <li>她年轻时迷死一大片男人</li>
         <li>今39岁甜的像个水蜜桃</li>
         <li>最近一对农村男女相亲火了</li>
         <li>被网友称为最朴实最美好的相亲</li>
         <li>直击北京故宫航拍照:尽显皇家威严</li>
         <li>却被现代化的建筑步步紧逼</li>
         <li>唐僧的三个徒弟中,猪八戒实力垫底</li>
         <li>孙悟空也不一定排第一</li>
     </ul>

 </section>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

常用伪类.jpg


七. 举例演示常用CSS表单伪类选择器(不少于三种)
所谓非限定类型, 是指只关注子元素的位置, 忽略子元素类型(当然也可以指定类型)


实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用CSS表单伪类选择器</title>
    <style type="text/css">
        input:enabled{
            background: darkgrey;
        }
        input:focus {
            background: #7a3dff;
        }
        input:disabled{
            background: chocolate;
        }
    </style>
</head>
<body>
 <section>
        <h2>常用CSS表单伪类选择器</h2>
     <form action="login.php">
         <p>
             <label for="username">用户名:</label>
             <input type="text" name="username" id="username" value="请输入用户名">
         </p>
         <p>
             <label for="password">密码:</label>
             <input type="password" name="password" id="password" placeholder="请输入密码">
         </p>
         <p>
             <label for="password">确认密码:</label>
             <input type="password" name="password" id="password" placeholder="请确认密码">
         </p>
         <p>
             <label for="email">邮箱:</label>
             <input type="email" name="email" id="email" placeholder="example@email.com">
         </p>
         <p>
             <label for="warning">警告:</label>
             <input type="text" id="warning" value="一天内仅允许登录三次" style="border:none" disabled>
         </p>
     </form>
 </section>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例



声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议