实验:CSS+Div基础 - 预习报告

简介: 网页设计技术实验预习报告。



课程名称:网页设计技术;实验名称:CSS+Div基础




【实验目的】

1、掌握CSS,Div的基本概念及其作用

2、熟练掌握CSS中常用属性的作用及应用;

3、理解并掌握CSS+Div在网页布局中的作用。

【实验仪器】

PC, Dreamweaver

【预习内容】

CSS+Div基础



预习报告正文:

1. 写出下列的css样式:


声明P的字体颜色为蓝色,字体大小18px,缩进20px。


P{

 Font-size:18px;

 Color:blue;

 Letter-spacing:20px;

}


声明类myFont的背景颜色为红色,边框为1px白色实体框,字体中间对齐。


.myFont{

       text-align:center;

       Border:1px solid white;

       background-color:red;

}


声明ID为myDiv的背景图片为(images/header.jpg),并不重复出现和居中。

 

#myDiv{

      background-image: url(images/header.jpg);

      background-repeat: no-repeat;

      background-position: center;

}

 



2. 写出CSS的三大特性,并各举一个例子说明。(只需要写出css部分和主要HTML代码部分即可)

答:


CSS有三个非常重要的三个特性:层叠性、继承性、优先级。


1.层叠性

相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题。

层叠性原则:

- 样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式

- 样式不冲突,不会层叠


层叠性示例:

Div{

Font-size:18px;

Color:red;

}

Div{

Color:green;

}

最终div标签内的颜色是green。

 



2.继承性

子标签会继承父标签的某些样式,如文本颜色和字号。


继承性示例:

</head>

<style type = text/css>

Div{

Font-size:18px;

Color:red;}

</style>

</head>

<body>

<div><p>p标签中的内容会继承div标签的属性</p></div>

</body>


 

3.优先级

当同一个元素指定多个选择器,就会有优先级的产生。

- 选择器相同,则执行层叠性

- 选择器不同,则根据选择器权重执行


优先级示例:

<style>

       .test {

           color: red;

       }

       div {

           color: pink!important;

       }

       #demo {

           color: green;

       }

   </style>

</head>

<body>

   <div class="test" id="demo" style="color: purple;">优先级演示</div>

</body>

 

 

 

目录
相关文章
|
2月前
|
前端开发
css div覆盖样式(一个div想覆盖掉另一个div在他上面进行显示)
css div覆盖样式(一个div想覆盖掉另一个div在他上面进行显示)
26 0
|
22天前
|
前端开发
css 实用技巧 —— div在div中水平垂直居中(两种方法)
css 实用技巧 —— div在div中水平垂直居中(两种方法)
28 3
|
22天前
|
前端开发
css 拉伸 resize —— 实现可拉伸的div(含限制拉伸的尺寸)
css 拉伸 resize —— 实现可拉伸的div(含限制拉伸的尺寸)
18 1
|
22天前
|
前端开发
css div填满剩余高度
css div填满剩余高度
12 0
|
2月前
|
编解码 前端开发 UED
div+css详解
总的来说,"div+css"是一种强大的网页布局方法,它提供了灵活性和可维护性,使得网页设计师和开发人员能够创建各种各样的页面布局和风格,同时确保网站具有一致的外观和良好的用户体验。它已成为现代Web开发中的标准实践之一。
73 3
|
2月前
|
前端开发 JavaScript
css 设置div阴影样式
css 设置div阴影样式
33 0
|
2月前
|
前端开发 小程序
css div添加滚动条(附加源码)
css div添加滚动条(附加源码)
21 0
|
2月前
|
前端开发 搜索推荐 容器
div+css的布局较table布局有什么优缺点?
div+css的布局较table布局有什么优缺点?
N..
|
2月前
|
前端开发 容器
DIV+CSS网页布局
DIV+CSS网页布局
N..
23 0
|
2月前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
51 0