當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

初学JavaWeb，前端css要不要了解一下啊？一文学会JavaWeb中css的简单应用

發布時間：2023/12/2 HTML 35 豆豆

生活随笔收集整理的這篇文章主要介紹了初学JavaWeb，前端css要不要了解一下啊？一文学会JavaWeb中css的简单应用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

- 一、設置CSS樣式
- 二、CSS代碼語法
- 三、CSS選擇器
- 四、css文檔手冊分享

關于JavaWeb中的HTML：《你是不是已經超綱了？一文解決JavaWeb中要求的HTML，是什么樣的？》

一、設置CSS樣式

有三種設置方式。

1、在HTML標簽內設置：僅對當前標簽有效。

①代碼

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>這是網頁標題</title> </head><body><div style="border: 2px double black;width: 100px; height: 100px;"></div> </body></html>

②顯示效果

2、在head標簽內設置：對當前頁面有效

①代碼

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>這是網頁標題</title><style type="text/css">.one {width: 100px;height: 100px;border: 2px solid rgb(25, 23, 27);background-color: green;margin-top: 20px;margin-left: 10px;}</style> </head><body><div class="one"></div><div class="one"></div><div class="one"></div> </body></html>

②顯示效果

3、引入外部CSS樣式文件

①代碼
html文件

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>這是網頁標題</title><link rel="stylesheet" href="divstyle.css"> </head><body><div class="one"></div><div class="one"></div><div class="one"></div> </body></html>

css文件

.one {width: 100px;height: 100px;border: 2px solid rgb(25, 23, 27);background-color: blue;margin-top: 20px;margin-left: 10px;}

②顯示效果

二、CSS代碼語法

①CSS樣式由選擇器和聲明組成，而聲明又由屬性和值組成。
②屬性和值之間用冒號隔開。
③多條聲明之間用分號隔開。
④使用/* … */聲明注釋。

三、CSS選擇器

1、標簽選擇器
①代碼
HTML代碼：

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>這是網頁標題</title><link rel="stylesheet" href="divstyle.css"> </head><body><p>這是第一個段落！</p><p>這是第二個段落！</p><p>這是第三個段落！</p> </body></html>

css代碼：

p {font-size: 32px;color: blueviolet;font-family: "微軟雅黑";}

②顯示效果

2、id選擇器
①代碼
HTML代碼：

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>這是網頁標題</title><link rel="stylesheet" href="divstyle.css"> </head><body><p>這是第一個段落！</p><p id="two">這是第二個段落！</p><p>這是第三個段落！</p> </body></html>

css代碼：

#two {font-size: 20px;color: blueviolet;background-color: aqua;}

②顯示效果

3、類選擇器
①代碼
HTML代碼：

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>這是網頁標題</title><link rel="stylesheet" href="divstyle.css"> </head><body><p class="one">這是第一個段落！</p><p id="two">這是第二個段落！</p><p>這是第三個段落！</p> </body></html>

css代碼：

.one {font-size: 12px;color: blue;background-color: red;}

②顯示效果

四、css文檔手冊分享

百度網盤鏈接：點擊下載css文檔手冊
提取碼：0909

關于Java中的JavaScript：《初學JavaWeb需要的前端js，JavaScript是什么樣的？》

總結

以上是生活随笔為你收集整理的初学JavaWeb，前端css要不要了解一下啊？一文学会JavaWeb中css的简单应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：你是不是已经超纲了？一文解决JavaWe
下一篇：程序猿必备工具『CSDN浏览器助手』之超