• PHP基础学习第六篇（初识CSS）

    一、什么是CSS？

    CSS是层叠样式表（Cascading Style Sheets）

    样式可定义HTML元素的显示效果

    样式通常储存在样式表中

    使用外部样式表可以极大提高工作效率，外部样式表通常存储在CSS文件中

    多个样式定义可层叠为一个

    二、CSS语法

    CSS规则由两个主要的部分构成：选择器，以及一条或多条声明

    h1{color:blue;font-size:16px;}

    h1：选择器

    color、font-size：属性

    blue、16px：值

    选择器通常是需要改变样式的HTML元素

    每条声明由一个属性和一个值组成

    属性是希望设置的样式属性。每个属性有一个值，多个属性和值被冒号分开。

    CSS注释：CSS注释以/*开始，以*/结束

    /*这是个注释*/

    p{

    text-align:center;/*这是另一个注释*/

    color:black;

    font-family:arial;

    }

    CSS选择器：CSS提供id和class两种选择器

    id选择器：id选择器可以为标有特定id的HTML元素指定样式，HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义。

    以下的样式规则应用于元素属性id="part1":

    #part1

    {text-align:center;

    color:red;}

    class选择器：选择器用于描述一组元素的样式，class选择器有别于id选择器的是可以在多个元素中使用。

    class选择器在HTML中以class属性表示，在CSS中，类选择器以一个点“.”号显示，在以下的例子中，所拥有center类的HTML元素均为居中。

    .center {text-align:center;}

    可以指定特定的HTML元素使用class。

    令所有的p元素使用class="center"让该元素的文本居中：

    p.center {text-align:center;}

    CSS样式表

    样式表有三种：外部样式表（External style sheet）、内部样式表（Internal style sheet）、内联样式（Inline style）

    当样式需要应用于很多页面时，可使用外部样式表。通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。

    标签在头部：

    外部样式表以.css扩展名保存：

    hr {color:sienna;}

    p {margin-left:20px;}

    body {background-color:blue;}

    当单个文档需要特殊的样式设计，可使用内部样式表，

    内联样式会要将表现和内容混杂在一起，会损失掉样式表的许多优势，需要谨慎使用。

    这是一个段落。

    多重样式优先级

    （内联样式）>（内部样式）>（外部样式）>游览器默认样式

    代码效果如下：

     代码

    1. html>
    2. <html>
    3.      <head>
    4. 	    
    5. 		<title>CSStitle>
    6. 		<link rel="stylesheet" type="text/css" href="实验3.css">
    7. 		<style>
    8. 		
    9. 		h1                  /*内部样式设计*/
    10. 		{
    11. 		    color:blue;     /*颜色=蓝色*/
    12. 		    font-size:30px; /*字体大小=30px*/
    13. 		}
    14. 		#xm                /*ID选择器*/
    15. 		{
    16. 		    width:400px;
    17. 		    text-align:center;/*文字水平对齐居中*/
    18. 		    color:red;        /*颜色=红色*/
    19. 		}
    20. 		.xiaomo          /*class选择器*/
    21. 		{
    22. 		    text-align:center;
    23. 		    color:green;/*颜色=绿色*/
    24. 		}
    25. 		p.right/*只对
      起作用*/
    26. 		{
    27. 		    text-align:right;
    28. 		    color:blue;
    29. 		}
    30. 		style>
    31. 		
    32. 		
    33. 	 head>
    34. 	 <body>
    35. 	    <h1>语法、选择器与样式表h1>
    36. 		<div id="xm">这是一个ID选择器div>
    37. 		<div class="xiaomo">标题居中div>
    38. 		<h1 class="xiaomo">区块居中h1>
    39. 		<p class="right">最右蓝色p>
    40. 		<div class="ha">外部样式表div>
    41. 		
    42. 	 body>
    43. html>

    外联样式代码：千万记得把文件后缀改为.css

     

  • 相关阅读:
    深入解读 EVM 的生态帝国
    开源日报 0824 | 构建UI组件和页面的前端工作坊
    【Verilog】布斯算法（Booth Algorithm）乘法器的 Verilog 实现
    SAP教程之 Sap S/4HANA的未来是什么？它会取代 SAP ABAP 吗？
    Java web（六）：Filter&Listener&AJAX
    iOS 展示网络GIF 图片
    面试官：你能用异步模拟超时重传机制？
    我为什么开始写技术博客
    3.MySQL数据库的索引
    AVL树中旋转算法的调用
  • 原文地址：https://blog.csdn.net/xiaomoge__/article/details/126875191