html+CSS之文件樣式（一）

阿新 • • 發佈：2019-01-17

今天學習了樣式方面的知識，於是寫一下自己的心得，和大家分享一下~ ~

文件樣式：

以<style></style>出現在文件<head>內。

如：
<style type="text/css">

規則表

</style>

每一條規則分兩部分：選擇器、一組屬性與值。

如：selector {屬性1:值1; 屬性2:值2; ...;}

標籤選擇器
顧名思義，就是可以通過標籤來設計其樣式，也就是作用於整個文件的制定標籤。適用於設計同一標籤且樣式一樣的。

<head>
<meta charset="utf-8">
<title>無標題文件</title>
	<style type="text/css">
		h1{
			color:red;
			font-size:36px;
			}
		h2,p{/*並集標籤，用逗號“,”隔開*/
			color:blue;
			}
    </style>
</head>

<body>
	<h1>樣式設計</h1>
    <h2>標籤選擇器</h2>
    <p>一起學習樣式</p>
</body>

效果圖：

2.類選擇器

1）作用於多種不同的標籤，適合用於設計不同標籤但樣式相同的標籤。

<head>
<meta charset="utf-8">
<title>無標題文件</title>
	<style type="text/css">
		.name{color:blue;}
    </style>
</head>

<body>
	<h1 class="name">樣式設計</h1>
    <h1>標籤選擇器</h1>
    <p class="name">一起學習樣式</p>
</body>

效果圖：

2）類選擇器也可以作用於同一標籤的不同例項。

<head>
<meta charset="utf-8">
<title>無標題文件</title>
	<style type="text/css">
		h1.name{color:blue;}
		h1.else{color:red;}
    </style>
</head>

<body>
	<h1 class="name">樣式設計</h1>
    <h1 class="else">類選擇器</h1>
</body>

效果圖：

3.id選擇器
只能做用於文件中唯一的一個標籤例項。（id在同一個頁面也可以用好幾次）

4.通配選擇器
適用於文件中的所有標籤，可以定義所有標籤的樣式。適用於全域性配置。

<head>
<meta charset="utf-8">
<title>無標題文件</title>
	<style type="text/css">
		*{color:blue;}
		h1.else{color:red;}
    </style>
</head>

<body>
	<h1>樣式設計</h1>
    <h1 class="else">類選擇器</h1>
    <p>配置選擇器</p>
    <p>標籤選擇器</p>
</body>

效果圖：

（從效果圖可以看出，在配置選擇器的作用下，類選擇器優先順序更高。）

5.上下文選擇器
限定於文件上某些特定位置上的元素，一共有兩種寫法：
1）寫法一：

<head>
<meta charset="utf-8">
<title>無標題文件</title>
  <style type="text/css">
     form em {font-size:14pt; color:red;} 
  </style>
</head>    
<body>
  <form action="">
      <p><em>樣式作用的文字</em>其他文字</p>    
      </form>
      <p><em>其他文字</em></p>
</body>
</html>

效果圖：

2）寫法二：

<head>
  <style type="text/css">
    #normal    {font-size:20;}
    #normal p  {color:red;   }	
    #normal h3 {color:blue;  }  
  </style>
</head>    
<body>
  <div id="normal">
    <h3>應用id繼承</h3>
    <p>應用id繼承</p>
  </div>
      <h3>沒有應用id繼承</h3>
      <p>沒有應用id繼承</p>
</body>

效果圖：

html+CSS之文件樣式（一）

今天學習了樣式方面的知識，於是寫一下自己的心得，和大家分享一下~ ~ 文件樣式：  以<style></style>出現在文件<head>

Python練習之基礎語法、數據類型、字符編碼、文件操作（一）

AD 編碼基礎 orm 分享基本知識 mage fff pos 最近做了幾道練習題，用的都是一些python的基本知識，但每道題都有層次，需要紮實的基礎功底。第一道基礎需求：讓用戶輸入用戶名密碼認證成功後顯示歡迎信息輸錯三次後退出程序升級需求：可以支持多

演算法工程師修仙之路：python3官方文件筆記（一）

本筆記來自於python手冊的中文版第一章開胃菜雖然 Python 易於使用，但它卻是一門完整的程式語言。與 Shell 指令碼或批處理檔案相比，它為編寫大型程式提供了更多的結構和支援。 Python 提供了比 C 更多的錯誤檢查

Django 2.0 之Models(模型) 官方文件翻譯（一）

以下翻譯是自己學習的時候順便記下的，如果有不對的地方還請指正。模型是關於你的資料的唯一、確定的資料來源。它包含你所儲存的資料的基本欄位和行為。通常，每個模型對映到一個數據庫表。基礎知識：每一個模型都是一個Python類，它是 django.db.models.Mo

Python培訓知識總結系列- 第三章 Python3文件操作（一）

readline new socket 總結排序 tin strip() list 是否 open 123456789f = open(‘filename‘,‘r‘) # 讀模式f = open(‘filename‘,‘w‘) # 寫模式f = open(‘filenam

[筆記]何為Linux及其文件系統（一）

發展 centos spl 就是中文 targe 辦公即時通鳥哥 Linux是免費開源的，任何人可以建立和編譯其源代碼，並分發給別人。這就是為什麽Linux有許多版本。 Linux針對不同的用戶都有不同類型的版本與之對應：有些具有強大的安全性和支持性，Redhat

jmeter文件目錄（一）

服務器配置自動 .bat 擴展插件目錄 .com print 圖片測試 Jmeter的文件目錄如下圖： 1、bin：可執行文件目錄 a、jmeter.bat：Windows環境下的啟動文件 b、jmeter.log：日誌文件 c、jmeter.sh：Linux環境

Spring MVC 4.2.4 文件實踐（一）--- 菜鳥從零開始學系列

1 前言本文後續將開啟一個系列，順著作者學習 Spring MVC 文件的腳步，從零開始搭建一個基於 Spring MVC 的 web 應用，並且根據 Spring MVC 的文件內容，選擇現有的，用的比較多的，實現性比較好的特性，基於其程式碼實現，來講解其原始碼和背後的原理，這既是對自己在 Spring

xlwings文件學習--（一）搭建開發環境

0.開發環境Anaconda3-5.1.0-Windows-x86_64pycharm 2018.1.31.建立專案開啟pycharm，file→new project如下圖操作①選擇scientific專案型別②在location處為專案修改名字為xlwing點選creat

html非標準文件流（浮動）整理。

一、為什麼需要浮動？塊級元素不能與任何元素標籤在同一行，行級元素雖然可以和行級元素在同一行，但是無法調整元素的寬高！所以標準的文件流限制太多，非常生硬，不夠靈活。為了讓行內元素有並排的效果，也要能設定寬高，所以就需要浮動。二、關於浮動的性質。浮動的元素會脫離標準的文件流!！這個很重

PureMVC 官方文件翻譯（一）

　　　　最近在學習PureMVC框架，感覺最權威的還是閱讀官方文件，順便翻譯了下全當記筆記了。 PureMVC概覽　　　　這篇文件他討論PureMVC框架的類和介面，使用UML來闡述它們的角色、職責和協作。　　　　PureMVC框架有一個非常細小的目標一一就是幫助你把應用程式編碼之間的關聯分離成明確

Theano Tutorial文件翻譯（一）：詞彙

Apply 應用應用的意思是對於輸入進行運算然後產生輸出值。就像是數學函式a[符號值] Broadcasting 廣播廣播是一個允許把不同維度的張量通過一個一個元素進行運算的機制。他通過複製相對小的張量來進行運算。 Constant 常數

Autofac官方文件翻譯——（一）Getting Started

立即開始將Autofac整合到你的應用的基本模式如下：按照控制反轉(IoC)的思想構建你的應用程式新增Autofac引用在application啟動程式碼裡… 建立ContainerBuilder物件註冊元件 Build容器並且儲存以備用在程式

Spring Boot 官方文件學習（一）入門及使用

轉載：http://www.cnblogs.com/larryzeal/p/5799195.html 目錄：一、內建Servlet Container： Name Servlet Version Java Version Tomcat 8 3.1

Kafka官方文件翻譯（一）產品概述

流平臺的三要素： 1、提供釋出/訂閱記錄流的能力，類似於訊息佇列； 2、對記錄流的儲存有容錯能力； 3、可以即時處理記錄流。kafka可用於兩大類應用： 1、建立實時流資料管道，在系統或應用之間進行可靠傳輸； 2、建立基於實時流的應用，可以傳輸或處理資料流。先知概念： *k

多媒體文件格式（一）：MP4 格式

可視化可能不能 -c ovf alt fps ng- mda 在互聯網常見的格式中，跨平臺最好的應該就屬MP4文件了。因為MP4文件既可以在PC平臺的Flashplayer中播放，又可以在移動平臺的Android、iOS等平臺中進行播放，而且使用系統默認的播放器即可以播

軟工之文件圖形（二）

【背景】文件在程式設計中的重要性不言而喻，而各個階段的文件又是我們進行分析設計有力的工具。之後我們要學習的機房重構等都會用到這些圖形。現在我對這些圖形的理解還不夠深刻，下面畫了幾個階段中重要

Elasticsearch7.2中文文件翻譯（一）:Elasticsearch簡介

為了搜尋和分析，你懂得！！！簡介 Elasticsearch是Elastic Stack核心的分散式搜尋和分析引擎。Logstash和Beats有助於收集，聚合和豐富您的資料並將其儲存在Elasticsearch中。Kibana使您能夠以互動方式探索，視覺化和分享資料洞察，並管理和監控堆疊。Elastic

JavaScript操作文件樣式（css）的方法

一、修改文件元素的style屬性。例如：e.stye.backgroundColor = "red"; 注意點： 1.一次只能操作一

[CSS]CSS浮動float詳解（一）：標準文件流

Web網頁的製作，是一個流，必須自上而下依次進行。標準文件流流的比喻很形象，就像水流一樣，必須從上而下，像織毛衣一樣。那麼究竟什麼是標準文件流呢？在web中，標準文件流有以下幾個特點：高矮不齊，底邊對齊自動換行無論字型大小有多高，

html+CSS之文件樣式（一）

文件樣式：

相關推薦