学习(review)二——CSS(上)

发布时间 2023-04-26 22:24:41作者: 发奋览尽天下书

CSS(层叠样式表)

一般通过<style type="text/css"> 内部为CSS环境</style> 进行编写CSS。

使用 CSS,您可以控制颜色、字体、文本大小、元素之间的间距、元素的位置和布局、

要使用的背景图像或背景颜色、不同设备的不同显示和屏幕大小等等CSS一般用于修饰页面显示效果

设计网页的样式,美化网页,取代了原来部分的HTML标签

CSS有标签选择器,id选择器,类选择器,组合选择器,其中id选择器具有唯一性。

eg:  .f2{font-size:77px} <p class = "f2">w </p>(类选择器)

      #p4{background:red  font-size:55px } <p id = "p4">w </p>(id选择器)

     p{color : red} <p s yle="color:red ;">A red paragraph.</p>(标签选择器)

     div   p{color : blue}  组合样式(不是很确定是不是这样写的QWQ)

如果CSS从位置分类,则可以分作嵌入[内联](在标签内部嵌入相应属性以属性的样式存在)

eg:<span style ="font-size.......">

注:多个样式同时在的时候优先级采用就近原则

  • 就近原则——最靠近相关标签的样式优先级高

    1. 行内样式优先级最高;
    2. 内部样式优先级大于导入样式,而与链接样式的优先级则与文档顺序有关,越靠近相关标签的样式优先级越高,即遵循就近原则。
    3. 导入样式与链接样式的优先级也遵循就近原则。

内部,当单个文档需要特殊的样式时,就应该使用内部样式表。

eg:<head> <style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head>

外部:通过使用 <link> 元素链接到外部 CSS 文件 ,<link> 标签在(文档的)头部

eg: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

参考链接:HTML CSS 样式表 (w3schools.cn)

(61条消息) CSS三种样式表(内部样式表、行内样式表、 外部样式表)_hello_dashen的博客-CSDN博客

CSS Id 和 Class选择器 | 菜鸟教程 (runoob.com)

(61条消息) CSS样式表优先级_样式表的优先级_性灵的博客-CSDN博客