（前端）（第二章）CSS（层叠样式表）基本代码编写

最新推荐文章于 2024-09-13 23:32:49 发布

今天肚书谁跟！

最新推荐文章于 2024-09-13 23:32:49 发布

阅读量470

点赞数 21

文章标签：前端 css html

本文链接：https://blog.csdn.net/tangdoubx95/article/details/140874764

版权

我用的pycharm，你们用VS也可以，反正能编写即可

1、风格很重要，美术吧可以说是

2、颜色

<p>this is an ordinary paragraph</p>
<p style="color:red">this is a red paragraph.</p>

字体颜色：用style="color=red"即可。编译器会显示颜色预览的（比如我的Pycharm）

编辑HTML源代码的时候，如果开始在style中输入颜色，pycharm是有出现颜色菜单的。（VS里面也有）

背景颜色：background:yellow即可

<p>this is an ordinary paragraph</p>
<p style="color:red; background: green;">red in words and green in background</p>

3、颜色的进阶实践

鼠标移动过后颜色突出显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The color is highlighted after the mouse movement.</title>
</head>
<body>
<p onmouseover="doMouseOver();" id="mouseOverPar"> ROLL YOUR MOUSE OVER THIS PARAGRAPH.</p>
<script>
    function doMouseOver(){
        var par = document.getElementById("mouseOverPar");
        par.style="color:red";
    }
</script>
</body>
</html>

用的是事件：onmouseover。但是我们移动之后颜色也回不去了，怎么办？你还需要一个onmouseout的事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The color is highlighted after the mouse movement.</title>
</head>
<body>
<p onmouseover="doMouseOver();" onmouseout="doMouseOut();" id="mouseOverPar">ROLL YOUR MOUSE OVER THIS PARAGRAPH.</p>//out事件跟over事件合在一起即可。

<script>
    function doMouseOver() {
        var over = document.getElementById("mouseOverPar");
        over.style.color = "red";//红色
    }
    function doMouseOut() {
        var out = document.getElementById("mouseOverPar");
        out.style.color = "black"; //黑色
    }
</script>
</body>
</html>

4、字体选择

可以指定一个字体家族。可以指定一个想用的字体列表，浏览器将顺序查找它可以用的字体。

<p style="font-family: Arial,Helvetica,sans-serif">this is in sans-serif font</p>

前面的样式要求使用Arial，其次是Helvetica，再就是sans-serif。之后就会分到一个组一样了。。。。

5、字体大小

单位用em吧，那不然就像h1这种比较标准的格式。

<p>this is a normal text</p>
<p style="font-size: 0.5em">this is 0.5em</p>
<p style="font-size: 1em">this is 1em</p>
<p style="font-size: 2em">this is 2em</p>
<p style="font-size: 3em">this is 3em</p>

6、文本对齐（左右中央自调整）

<p style="text-align: left;">this is left</p>
<p style="text-align: center;">this is center</p>
<p style="text-align: right;">this is right</p>
<p style="text-align: justify;">this is justify</p>

7、开发一个走动的时钟

请看注释。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>time clock</title>
</head>
<body onload="doStartClock();">
<!--onload事件是要执行的动作是一个包含JS语句的字符串，这些语句在元素被加载的时候被遵守，也就是说这些语句已经被设定好了很久了！！不用自己设定啦！！！因为这个字符串叫doStartClockmethod。当页面加载完成后，调用这个函数，是必须从startclock函数中调用doClockTick这个函数！！！！！另外如果你要这么玩，<body onload="var x=99;alert(x);">这个也是合法代码，就是加载的时候执行的js创建了一个x变量，这个值设置为99-->
  <p id="timePar" style="font-size: 10em;font-family:'Times New Roman';text-align: center;">00:00:00</p><!--这是设定时钟显示方式的段落-->
<script>
  function doStartClock(){//启动时钟的函数
    setInterval(doClockTick,1000);//每秒调用一次doclocktick
  }

  function doClockTick(){//将时钟更新为当前的时间，以下都是创建的心得变量！！!!!！!！!!
    var currentDate= new Date();//当程序想要创建一个新的对象，就会使用new，new是后面要创建的对象类型的名称，var是用来创建变量的，new是创建对象，
    var hours=currentDate.getHours();
    var mins=currentDate.getMinutes();
    var secs = currentDate.getSeconds();
    var timeString=hours+":"+mins+":"+secs;
    var outputElement = document.getElementById("timePar");
    outputElement.textContent=timeString;
  }
</script>
</body>
</html>

8、文本周围的空距

<p style="margin: 20px";
   border:1px;
   border-style:soild;border-color:blue;padding:10px;">
   this is some text in a blue box.</p>

打开开发者模式就可以看到了。边距和边框的尺寸用我们以前没见过的单位表示，叫px，是像素的简称。px单位是一个绝对的单位，相当于目标显示器上的一个点，在为屏幕绘制的图像指定尺寸的时候就会用到这个单位。如果想要精确布局就要用这个单位来对文本和图形进行精确的布局。

margin:边距（元素周围的边距）

border:边框（可以用各种风格和颜色绘制，可以设置粗细）

padding:填充（项目和border的间距）

<p style="
margin: 20px;
border: 1px;
border-style: solid;
border-color: blue;
padding: 10px;
width: 400px;
font-family: 'Times New Roman';
text-align: justify">
    <img src="seaside.JPG" alt="Waves crashing on a deserted beach" width="400">
</p>

9、样式表

HTML文档可以用style属性来为文档中的任何元素加样式。可以在一个HTML文档中添加一个样式表来对文档中的元素应用样式。样式表添加在文档头部的<style>和</style>标签之间。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>styles</title>
  <style>
    p{
      color: blue;
      font-family: "Times New Roman";
    }
  </style>
</head>
<body>
  <p>
    this is a modified paragraph.
  </p>
</body>
</html>

可以用样式表来设置元素的样式属性。从选择器开始设置。这个p{}是给<p>的元素设置样式，因此这就是前面样式表中指定的内容，样式表的变动让文档中的所有<p>元素显示为蓝色文本，设置字体。

10、创建一个样式表文件。

在页面很多的情况下，对每个页面的<head>部分进行整体风格的设置，要对每个文档分别编辑，为了减少工作量，样式设置可以存储在一个单独的文件中，然后在HTML标题中添加一个<link>元素，再指定要添加的样式表文件。

<head>
<link rel="stylesheet" href="style.css">
</head>

link元素包含rel属性，告诉浏览器这个链接是什么资源类型，href属性给出了链接，指向其中包含样式信息的文件，在前面的HTML页面中，包含的样式信息的文件是一个名为style.css的本地文件，和html文件保存在同一个文件夹中，也可以存在不同的文件夹，或者服务器。

把样式和布局分开，把设计的留给设计师做，自己做HTML。

11、创建样式类

如果遇到复杂的应用程序，就需要用到比较复杂的其他样式。比如我们可能想用不同格式来显示一个地址，可能是红色的，用新的字体，右对齐，所以可以在文档的样式表中添加一个新的样式类address.

.address{
    color:red;
    font-family: "adobe-clean", "Helvetica", "Arial", "sans-serif";
    text-align: right;
}

这看起来和修改<p>的样式的方式差不多，但address类有一个前置的点"."，表示这是一个新创建的样式类：.address。然后我们就可以指定这个类提供一个段落的样式。(在html里面设置哈）

<p class="address">this is an address paragraph.</p>

一个元素的class属性制定了一个css样式类，该样式类将用来为该元素设置样式。这意味着前面这段文字将在页面的右侧以红色和单行体出现哈。你可以这样理解，就是这个class相当于分组，指定了address这个组对应的文字是什么样式的，跟其他的组沾不上关系哈。

12、用div和<span>对文档部分进行格式化

可以为任何想要格式化的文本元素添加class属性，但有的时候将一个样式类同时应用于多个项目会方便很多，在前面address样式的例子中，我们想标记所示地址中的所有段落。我们可以去单独标记每个段落，但要是能同时标记它们就更好了。有了<div>和<span>两个元素，就可以同时标记所有的段落。它们用来创建可以分配样式类的区域。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div span</title>
    <link rel="stylesheet" href="c1.css">
</head>
<body>
  <div class="address">
    <p>hahahha</p>
    <p>1111111</p>
    <p>Adriana Murphy</p>
    <p>GuangZhou</p>
  </div>
</body>
</html>

前面的html用address类对地址的所有段落进行格式化，因为它们被划分为同一段。div元素指定了文档中的一个段落。每个div元素都标志着一个文本段的开始和结束。这意味着我们不能用div元素来设置一个段落中的某些单词的样式。如果想用特定的样式来格式化段落中的一部分，可以用span元素。

<p>YOU CAN USE IT
<span class="codeInText">style</span>
    attribute to add style to any element in a document.</p>
</p>

在前面的例子中，让style这个词在文本中突出显示，因为它是一个HTML元素的名字。我们已经创建了一个codeInText类，并用它来给句子中的单词style应用样式。这种情况下就不能用div，因为div会让句子被分成几行。span元素和div元素可以互相嵌套，但把div放在span中意义不大，因为会导致文本强行被断开。（看我前面的第一章的内容，div和span这个！！！！）

13、层叠样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cengdie styles</title>
</head>
<body style="color: blue;">
    <p>this is an ordinary paragraph</p>
<p style="color: red">this is red</p>
<p style="background: green;">this is green bg</p>
</body>
</html>

该文件包含三个样式元素，第一个应用于文档主题，其他两个应用于正文中的元素。body元素的样式是蓝色的。body元素包含两个段落元素，所以这个设置会逐级应用到这些段落。

由于应用于body元素，所以普通段落的文本是蓝色的。如果没有特别设置，就会默认一直应用蓝色这个颜色，红色是特殊设置才红色了。

14、使用选择器来突出显示颜色

在前面的动手实践中，用onmouseover事件触发了一个JS函数来改变段落文本的颜色，还有一种ez办法。

.rollover {
    color:black;
}

.rollover:hover{
    color:red;
}

在css创建一个叫rollover的样式，这个样式有两个定义：第一个定义是将颜色设置为黑色，第二个定义有一个额外的选择器hover，这个选择器规定了样式的变体应该用在什么情况下。hover选择器制定当鼠标悬停在一个呗设置为rollover类的元素上，就会应用为某个样式。

参考文献：

[英]Rob Miles. 轻松学会JavaScript, 2022.

今天肚书谁跟！

关注

21
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫