我的php学习第六天之css篇：css属性，浮动，盒

我的php学习第六天之css篇：css属性，浮动，盒子……

.昨日回顾

CSS的介绍

CSS，Cascading Style Sheets层叠样式表。

一个网页由三个部分：结构、表现、行为，对应的标准是：XHTML、CSS、JavaScript。

这三个标准语言，是浏览器直接可以识别的，并且能直接进行解释(翻译)的。

CSS的格式

一个CSS样式表(<style></style>)由多个CSS规则构成；

一个CSS规则由“选择器”和{}构成；

选择器就是给哪一个HTML元素定义；

CSS选择器

第一：基本选择器（单一）

通用选择器(*)：将匹配所有的HTML元素；
标签选择器：对应所有的HTML标记，名称与标记名称一样。
类选择器：可以通过给一类HTML元素，定义同一个class属性来增加样式。类样式定义以“.”开头定义。CSS的CLASS属性一般给层叠样式用表。比如：

.news表示class=news的元素增加样式
news表示class=news的<div>元素增加样式
.news title表示class=news下的class=title的<div>元素

ID选择器：给标记特定ID属性的HTML元素来增加样式。\

Id选择器的定义，以“#”号开头
网页不能出现同一个ID的值，ID像身份证号，具有唯一性；
HTML元素的ID属性，一般给JavaScript使用

第二：组合选择器

多元素选择器：也就是同时给多个HTML元素定义。

body,p,a,ul,li,p{margin:0px;padding:0px;}
每一个HTML元素都具有默认样式。

后代元素选择器：用空格来分隔各个选择器。

.news .title p{background-color:#FF0000;}

子元素选择器：用>号来分隔父子选择器，不存在第三层级的问题。

第三：伪类选择器

伪类选择器一般是给超链接<a>标记来增加样式。

超链接具有四个状态：

正常状态 a:link{ }

放上状态 a:hover{ }

激活状态a:active{ }

访问过状态 a:visited{ }

全局链接

a:link,a:visited{color:#333;text-decoration:none;}

a:hover{color:#FF0000,text-decoration:underline;}

给链接增加类样式 (class=“a2”)

a.a2:link,a.a2:visited{ }

a.a2:hover{ }

CSS的继承性

CSS内部元素将继承外部元素的样式，多个外层元素的样式就叠加到内层元素上。<body>元素是网页中最大的标记，它中的样式将被其它子元素继承。

哪些CSS属性能被继承：color、font-size、font-weight、font-style、line-height、text-indent、letter-spacing、word-spacing、text-align等

引入CSS的方式

（1）内嵌式

通过<style></style>来书写CSS代码。

只能应用于当前网页，不能被其它网页共享。

注意：<style>标记可以放在网页的任何地方，但一般放在<head>。

（2）外联式

通过<link>标记来引入外部的CSS文件(.css)。

可以被其它网页共享。public.css index.css news.css about.css

格式：<link href=“CSS的URL” rel=“stylesheet” type=“text/css” />

注意：<link>标记只能放在<head>中

（3）行内样式

通过style的属性来书写CSS代码。

每一个HTML元素，都有 style、class、id、name、title 属性。

举例：<p style=“font-size:24px;”></p>

CSS的字体/文本属性

Font-size：文字大小

Font-weight：加粗

Font-style：斜体

Color：颜色

Line-height：行高

Text-indent：首行缩进

Text-align：水平对齐

Letter-spacing：字符间距

CSS列表

List-style-type：列表类型，取值：none、circle、 square

List-style-position：符号位置，取值：inside、outside

List-style-image：图片路径，举例：list-style-image:url(images/li01.gif);

2.CSS背景属性

Background-color：背景颜色

Background-image：背景图片，举例：background-image:url(images/bg.gif);

Background-repeat：背景平铺，取值：no-repeat(不平铺)、repeat(平铺)、repeat-x(x方向)、repeat-y(y方向)

Background-position：背景定位，取值：固定值或百分比

格式：background-position:水平方向垂直方向;

用固定值定位：background-position:100px 0px; //距离左边100px，距离上边0px

用百分比定位：background-position:50% 50%; //水平方向居中垂直方向居中

用单词来定位：background-postion:left|center|right top|center|bottom; 三个值取其中一个

Background-attachment：附加信息，取值：scroll(滚动)、fixed(固定)

简写形式：background:url(images/bg.gif) repeat-x 100px 0px; //多个属性值间用“空格”隔开

3.CSS浮动和清除

Float：元素浮动，取值：left或right。

Clear：清除浮动，取值：left或right或both

CSS浮动元素将向左向右浮动；

浮动可以叫“飘”起来；

浮动的元素，直到碰到父元素的边框或前一个浮动元素的边框为止；

浮动元素是一个块元素框，不管它原来是什么元素(行内元素)；

浮动元素不再占用空间，脱离了普通文档流，层级比普通元素的级别高；

清除浮动

清除浮动特性后，清除元素之后的其它元素将恢复默认排版；
清除浮动特性后，包围元素从视觉上看起来，像包围住了浮动元素；

4.CSS边框属性

Border：同时设置四个边框的属性

Border-left：设置左边框的属性

Border-right：设置右边框的属性

Border-top：设置顶边框的属性

Border-bottom：设置底边框的属性

格式：border-bottom：粗细线型线颜色;

举例：border-bottom：2px solid #FF0000; //元素的下边线为2px粗的实线，颜色为红色

线型取值：none(无边线)、solid(实线)、dashed(虚线)、dotted(点状线)、double(双线)

5.“盒子”模型

每一个HTML元素可以看成一个“盒子”。

一个“盒子”具有：宽度、边框、内填充、外边距

宽度(width)和高度(height)：是指内容的宽度和高度，不含边框、外边距、内填充。

内填充(padding)：是指内容到边框线间的距离，含四个方向：上、右、下、左

外边距(margin)：是指边框线以外的距离。

计算一个“盒子”的总空度

假设：总宽度为100px，边框为1px，内填充为10px，求内容的宽度

Width=100px – 1px*2 -10px*2=78px

假设：总宽度为100px，内容的宽50px，求左右内填充分别是多少？

Padding-left=(100px – 50px )/2=25px

6.CSS内填充padding

Padding-left：左边线到内容间的距离

Padding-right：右边线到内容间的距离

Padding-top：顶边线到内容间的距离

Padding-bottom：底边线到内容间的距离

Padding：同时设置四个边的内填充距离

padding:10px; //表示：上下左右四个内填充都是10px

padding:5px 10px; //表示：上下为5px，左右为10px

padding:5px 10px 15px; //表示：上为5px，左右为10px，下为15px

padding:5px 10px 15px 20px; //表示：上右下左分别设置不同的内填充，顺序不可乱

7.CSS外边距margin

Margin-left：左边线以外的距离

Margin-right：右边线以外的距离

Margin-top：顶边线以外的距离

Margin-bottom：底边线以外的距离

Margin:10px; //表示：四个外边距都是10px

Margin:10px 15px; //表示：上下外边为10px，左右外边距为15px

Margin:5px 10px 15px //表示：上外边距为5px，左右外边距为10px，下外边距为15px

Margin:5px 10px 15px 20px; //分别设置四外外边距，顺序为“上右下左”

8.综合案例：PHP首页

一、首先要确定的事情

主页的宽度：973px

主页的背景色、背景图片

网页的结构：网页头部、网页尾部、网页主要内容（左右两列）

二、网页结构图

lass属性 - 定制化网页设计的强大武器

在HTML中,Class属性是一个非常强大而又灵活的工具。它可以让您为网页中的各种元素赋予独特的样式和功能,从而打造出与众不同的视觉效果和交互体验。本文将为您解密Class属性的魔力,教您如何利用它来实现个性化的网页设计。

1. Class属性的基本用法

Class属性允许您为HTML元素指定一个或多个类名。这些类名可以在CSS中定义样式规则,从而影响元素的外观。

<div class="header">
  <h1 class="title">欢迎来到我的网站</h1>
  <p class="description">这里是网站的简介信息</p>
</div>

.header {
  background-color: #f2f2f2;
  padding: 20px;
}

.title {
  color: #333;
  font-size: 24px;
}

.description {
  color: #666;
  font-size: 16px;
}

2. Class属性的进阶用法

除了基本的样式定制,Class属性还可以用于更复杂的场景。您可以为同一个元素指定多个类名,实现更细致的样式控制。

<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-secondary">次要按钮</button>

.btn {
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

.btn-primary {
  background-color: #007bff;
  color: #fff;
}

.btn-secondary {
  background-color: #6c757d;
  color: #fff;
}

3. Class属性与JavaScript的结合

Class属性不仅可以用于样式定制,还可以与JavaScript进行联动,实现各种交互效果。您可以通过JavaScript动态地添加、修改或删除元素的类名,从而改变它们的外观和行为。

<div id="box" class="box">这是一个盒子</div>

const box=document.getElementById('box');

box.classList.add('active'); // 添加类名
box.classList.remove('box'); // 删除类名
box.classList.toggle('hidden'); // 切换类名

4. Class属性的最佳实践

在使用Class属性时,有几个需要注意的最佳实践:

类名要具有描述性,方便理解和维护
避免过多的类名,保持CSS规则的简洁性
利用CSS预处理器如SASS/LESS来管理类名和样式规则
结合BEM或OOCSS等命名方法论,提高代码的可读性和可维护性

总之,HTML Class属性是一个非常强大的工具,它可以帮助您定制化网页设计,打造出独一无二的视觉效果和交互体验。只要掌握好它的用法,相信您一定能创造出令人惊叹的网页作品。

d属性 - 赋予网页元素个性化标识的关键所在

在HTML中,Id属性是一个非常重要的元素,它可以为网页上的每个元素提供一个独特的标识符。通过Id属性,您可以精准地定位和操作特定的HTML元素,从而实现更细致的样式控制和交互功能。本文将为您揭示Id属性的魔力,教您如何利用它来打造出与众不同的网页体验。

1. Id属性的基本用法

Id属性的值必须在整个HTML文档中是唯一的,这使它成为定位和操作特定元素的理想选择。通常情况下,我们会为页面中的重要元素如页头、导航栏、主内容区域等分别设置Id。

<header id="header">
  <nav id="nav">
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">产品</a></li>
      <li><a href="#">关于我们</a></li>
    </ul>
  </nav>
</header>

<main id="main">
  <section id="hero">
    <h1>欢迎来到我的网站</h1>
    <p>这里是网站的主要内容区域</p>
  </section>
</main>

2. Id属性与CSS的结合

有了Id属性,您可以在CSS中直接针对特定元素进行样式定制。这种精准的选择器使您能够更好地控制网页的视觉效果。

#header {
  background-color: #333;
  color: #fff;
  padding: 20px;
}

#nav ul {
  list-style-type: none;
  display: flex;
}

#nav li a {
  color: #fff;
  text-decoration: none;
  padding: 10px 20px;
}

#hero {
  background-color: #f2f2f2;
  padding: 50px;
  text-align: center;
}

3. Id属性与JavaScript的结合

除了CSS,Id属性在JavaScript中也扮演着重要的角色。通过Id,您可以快速地获取和操作特定的HTML元素,实现各种交互效果。

<button id="myButton">点击我</button>

const button=document.getElementById('myButton');

button.addEventListener('click', ()=> {
  alert('您点击了按钮!');
});

4. Id属性的最佳实践

在使用Id属性时,有几个需要注意的最佳实践:

Id值应该具有描述性,方便理解和维护
尽量避免在CSS中过度使用Id选择器,保持CSS规则的灵活性
结合Class属性使用,提高代码的可读性和可维护性
在JavaScript中谨慎使用Id,以免造成过度耦合

总之,HTML Id属性是一个非常强大的工具,它可以为网页元素提供独特的标识,从而帮助您实现精细化的样式控制和交互功能。只要掌握好它的用法,相信您一定能打造出令人惊叹的网页作品。

在线咨询

上一篇：都2021年了，做个Chrome插件给自己吧
下一篇：一篇文章搞懂 Django 中的 AJAX

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商