JavaWeb学习 - css样式

最新推荐文章于 2023-02-28 20:32:42 发布

魏帅坤

最新推荐文章于 2023-02-28 20:32:42 发布

阅读量1.1k

点赞数 1

分类专栏： JavaWeb 文章标签： html css java

本文链接：https://blog.csdn.net/qq_45181415/article/details/112628649

版权

JavaWeb 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS的引入方式，包括内联样式、内部样式表和外部样式表，强调了外部样式表在多页面样式统一中的重要性。接着，文章深入探讨了CSS选择器，包括基本选择器、属性选择器、组合选择器和伪类，以及各种属性的使用，如边框、背景、文本、外边距和内边距等。

摘要由CSDN通过智能技术生成

CSS

概念：

CSS (层叠样式表——Cascading Style Sheets，缩写为 CSS），简单的说，它是用于设置和布局网页的计算机语言.它主要的作用就是对HTML页面进行美化。

学习思路：选择器【用于找到标签】和属性【用于美化样式】

css引入html的三种方式：

引入方式

1.1 内联样式

了解,几乎不用,维护艰难

内联样式是CSS声明在元素的style属性中，仅影响一个元素：

格式：

<标签 style="属性名:属性值; 属性名:属性值;">内容</标签>

举例：

<h1 style="color: blue;background-color: yellow;border: 1px solid black;">
    Hello World!
</h1>

1.2 内部样式表

内部样式表是将CSS样式放在[style]标签中，通常style标签编写在HTML 的head标签内部。

格式：

<head>
    <style>
        选择器 {
            属性名: 属性值;
            属性名: 属性值;
        }
    </style>
</head>

举例：

  <head>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }
    </style>
 </head>

1.3 外部样式表

外部样式表是CSS附加到文档中的最常见和最有用的方法，因为您可以将CSS文件链接到多个页面，从而允许您使用相同的样式表设置所有页面的样式。

外部样式表是指将CSS编写在扩展名为.css 的单独文件中，并从HTML<link> 元素引用它，通常link标签编写在HTML 的head标签内部。：

格式：

<link rel="stylesheet" href="css文件">

rel：表示“关系 (relationship) ”，属性值指链接方式与包含它的文档之间的关系，引入css文件固定值为stylesheet。

href：属性需要引用某文件系统中的一个文件。

举例：

创建styles.css文件

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

link标签引入文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

选择器

基本选择器

元素选择器标签名基于标签名匹配元素 div{ } --能找到所有的div标签。

类选择器 . 基于class属性值匹配元素 .center{ } – 能找到所有class属性值为center的标签。

ID选择器 # 基于id属性值匹配元素 #username{ } --能找到id属性值为username的标签

属性选择器

属性选择器 [] 基于某属性匹配元素 [type]{ } – 能找到所有拥有type属性的标签。

属性选择器 [属性名=属性值] 基于某属性匹配元素 [type=text]{ } – 找到所有type属性并且值为text的标签。

[attribute]	[target]	选择带有 target 属性所有元素。
[attribute=value]	[target=_blank]	选择 target="_blank" 的所有元素。
[attribute~=value]	[title~=flower]	选择 title 属性包含单词 “flower” 的所有元素。
[attribute\|=value]	[lang\|=en]	选择 lang 属性值以 “en” 开头的所有元素。

组合选择器

语法	示例	含义
element,element	div,p	选择所有元素和所有元素。
element element	div p	选择元素内部的所有元素。
element>element	div>p	选择父元素为元素的所有元素。
element+element	div+p	选择紧接在元素之后的所有元素。

伪类

在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

提示：伪类名称对大小写不敏感。

属性

边框和文本属性

分类	属性名	作用
边框	border	边框
	border-top	底部边框
	border-radius	设置边框圆角
文本	color	颜色
	font-family	字体样式
	font-size	字体大小
	text-decoration	下划线
	text-align	文本水平对齐
	line-height	行高，行间距
	vertical-align	文本垂直对齐

边框的圆角样式

通过使用border-radius属性设置盒子的圆角，虽然能分别设置四个角，但是通常我们使用一个值，来设置整体效果，例如

    div {
            width: 200px;
            height: 200px;
            border: 10px solid blue;
            border-radius: 50px;
    }

背景

background	在一个声明中设置所有的背景属性。	1
background-color	设置元素的背景颜色。	1
background-image	设置元素的背景图像。	1
background-repeat	设置是否及如何重复背景图像。	1

[background-color] 示例：

body
  {
  background-color:yellow;
  }
h1
  {
  background-color:#00ff00;
  }
p
  {
  background-color:rgb(255,0,255);
  }

[background-image] 示例：

body
  { 
  background-image: url(bgimage.gif);
  background-color: #000000;
  }

文本

属性	描述	CSS
color	设置文本的颜色。	1
direction	规定文本的方向 / 书写方向。	2
letter-spacing	设置字符间距。	1
line-height	设置行高。	1
text-align	规定文本的水平对齐方式。	1
text-decoration	规定添加到文本的装饰效果。	1

CSS 外边距属性（Margin）

属性	描述	CSS
margin	在一个声明中设置所有外边距属性。	1
margin-bottom	设置元素的下外边距。	1
margin-left	设置元素的左外边距。	1
margin-right	设置元素的右外边距。	1
margin-top	设置元素的上外边距。	1

CSS 内边距属性（Padding）

属性	描述	CSS
padding	在一个声明中设置所有内边距属性。	1
padding-bottom	设置元素的下内边距。	1
padding-left	设置元素的左内边距。	1
padding-right	设置元素的右内边距。	1
padding-top	设置元素的上内边距。	1

浮动

float

让当前元素漂浮起来，漂浮到指定的位置。

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。

clear

清除浮动对下方元素造成的影响