CSS中的盒子模型

一.為什么使用CSS
?????1.有效的傳遞頁面信息
?????2.使用CSS美化過的頁面文本,使頁面漂亮、美觀,吸引用戶
?????3.可以很好的突出頁面的主題內容,使用戶第一眼可以看到頁面主要內容
?????4.具有良好的用戶體驗

?

??二.字體樣式屬性

?????1.font-family:英文字體,中文字體??(類型)
??????font-family: Times,"Times New Roman", "楷體";

?????2.font-size:值單位????? (大小)
??????單位
???????px(像素)
???????em、rem、cm、mm、pt、pc

?????3.font-style:normal(正常)、italic(斜體)和oblique(傾斜)??(風格)
??????p span{
??????????????? font-weight: 700;
??????????? }

?????4.font-weight: 700???(字體粗細)

??????normal?默認值,定義標準的字體
??????bold?粗體字體
??????bolder?更粗的字體
??????lighter?更細的字體
??????100、200、300、400、500、600、700、800、900?定義由細到粗的字體
??????400等同于normal,700等同于bold

?????5.font:字體風格→字體粗細→字體大小→字體類型
??????font:oblique bold 12px "楷體";
??三.文本樣式
?????1.color
???????rgb(0,0,0)??取值在0~255之間
???????rgba(0,0,0,0)?最后一位代表透明度,取值在0~1之間

?????2.文本水平對齊方式text-align
???????left?把文本排列到左邊。默認值:由瀏覽器決定
???????right?把文本排列到右邊
???????center?把文本排列到中間
???????justify?實現兩端對齊文本效果

?????3.首行縮進
???????text-indent:20px;

?????4.行高
???????line-height:30px;

?????5.文本裝飾
???????text-decoration
???????none?默認值,定義的標準文本
???????underline?設置文本的下劃線
???????overline?設置文本的上劃線
???????line-through?設置文本的刪除線

?????6.文本垂直對齊
???????vertical-align
???????top:上對齊
???????bottom:下對齊
???????middle:中間對齊
?????7.文本陰影
???????text-shadow:顏色?? x軸移動位置?? y軸移動位置? 模糊半徑(0代表沒有)

??四.超鏈接偽類
?????a:link?未單擊訪問時超鏈接樣式?a:link{color:#9ef5f9;}
?????a:visited?單擊訪問后超鏈接樣式?a:visited {color:#333;}
?????a:hover?鼠標懸浮其上的超鏈接樣式?a:hover{color:#ff7300;}
?????a:active?鼠標單擊未釋放的超鏈接樣式?a:active {color:#999;}

??五.列表樣式
?????list-style-image: url(image/arrow-icon.gif);??列表項前圖像
?????list-style-type??指定列表項前圖標
?????none?無標記符號?list-style-type:none;
?????disc?實心圓,默認類型?list-style-type:disc;
?????circle?空心圓?list-style-type:circle;
?????square?實心正方形?list-style-type:square;
?????decimal?數字?list-style-type:decimal

??六.背景顏色和圖像
????顏色:background-color
????圖像:background-repeat:url(路徑)
?????repeat:沿水平和垂直兩個方向平鋪
?????no-repeat:不平鋪,即只顯示一次
?????repeat-x:只沿水平方向平鋪
?????repeat-y:只沿垂直方向平鋪
??七.漸變
????-瀏覽器內核-linear-gradient(方向,開始顏色,結束顏色)
????background:linear-gradient(to left,red,blue);
??????????? ?background:-webkit-linear-gradient(to left,red,blue);

轉載于:https://www.cnblogs.com/1314Justin/p/9196990.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/389427.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/389427.shtml
英文地址,請注明出處:http://en.pswp.cn/news/389427.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

jdk重啟后步行_向后介紹步行以一種新穎的方式來預測未來

jdk重啟后步行“永遠不要做出預測,尤其是關于未來的預測。” (KK Steincke) (“Never Make Predictions, Especially About the Future.” (K. K. Steincke)) Does this picture portray a horse or a car? 這張照片描繪的是馬還是汽車? How likely is …

PyTorch官方教程中文版:入門強化教程代碼學習

PyTorch之數據加載和處理 from __future__ import print_function, division import os import torch import pandas as pd #用于更容易地進行csv解析 from skimage import io, transform #用于圖像的IO和變換 import numpy as np import matplotlib.pyplot a…

css3-2 CSS3選擇器和文本字體樣式

css3-2 CSS3選擇器和文本字體樣式 一、總結 一句話總結:是要記下來的,記下來可以省很多事。 1、css的基本選擇器中的:first-letter和:first-line是什么意思? :first-letter選擇第一個單詞,:first-line選擇第一行 2、css的偽類選…

mongodb仲裁者_真理的仲裁者

mongodb仲裁者Coming out of college with a background in mathematics, I fell upward into the rapidly growing field of data analytics. It wasn’t until years later that I realized the incredible power that comes with the position. As Uncle Ben told Peter Par…

優化 回歸_使用回歸優化產品價格

優化 回歸應用數據科學 (Applied data science) Price and quantity are two fundamental measures that determine the bottom line of every business, and setting the right price is one of the most important decisions a company can make. Under-pricing hurts the co…

Node.js——異步上傳文件

前臺代碼 submit() {var file this.$refs.fileUpload.files[0];var formData new FormData();formData.append("file", file);formData.append("username", this.username);formData.append("password", this.password);axios.post("http…

用 JavaScript 的方式理解遞歸

原文地址 1. 遞歸是啥? 遞歸概念很簡單,“自己調用自己”(下面以函數為例)。 在分析遞歸之前,需要了解下 JavaScript 中“壓棧”(call stack) 概念。 2. 壓棧與出棧 棧是什么?可以理解是在內存…

PyTorch官方教程中文版:Pytorch之圖像篇

微調基于 torchvision 0.3的目標檢測模型 """ 為數據集編寫類 """ import os import numpy as np import torch from PIL import Imageclass PennFudanDataset(object):def __init__(self, root, transforms):self.root rootself.transforms …

大數據數據科學家常用面試題_進行數據科學工作面試

大數據數據科學家常用面試題During my time as a Data Scientist, I had the chance to interview my fair share of candidates for data-related roles. While doing this, I started noticing a pattern: some kinds of (simple) mistakes were overwhelmingly frequent amo…

scrapy模擬模擬點擊_模擬大流行

scrapy模擬模擬點擊復雜系統 (Complex Systems) In our daily life, we encounter many complex systems where individuals are interacting with each other such as the stock market or rush hour traffic. Finding appropriate models for these complex systems may give…

公司想申請網易企業電子郵箱,怎么樣?

不論公司屬于哪個行業,選擇企業郵箱,交互界面友好度、穩定性、安全性都是選擇郵箱所必須考慮的因素。網易企業郵箱郵箱方面已有21年的運營經驗,是國內資歷最高的電子郵箱,在各個方面都非常成熟完善。 從交互界面友好度來看&#x…

莫煩Matplotlib可視化第二章基本使用代碼學習

基本用法 import matplotlib.pyplot as plt import numpy as np""" 2.1基本用法 """ # x np.linspace(-1,1,50) #[-1,1]50個點 # #y 2*x 1 # # y x**2 # plt.plot(x,y) #注意:x,y順序不能反 # plt.show()"""…

vue.js python_使用Python和Vue.js自動化報告過程

vue.js pythonIf your organization does not have a data visualization solution like Tableau or PowerBI nor means to host a server to deploy open source solutions like Dash then you are probably stuck doing reports with Excel or exporting your notebooks.如果…

plsql中導入csvs_在命令行中使用sql分析csvs

plsql中導入csvsIf you are familiar with coding in SQL, there is a strong chance you do it in PgAdmin, MySQL, BigQuery, SQL Server, etc. But there are times you just want to use your SQL skills for quick analysis on a small/medium sized dataset.如果您熟悉SQ…

第十八篇 Linux環境下常用軟件安裝和使用指南

提醒:如果之后要安裝virtualenvwrapper的話,可以直接跳到安裝virtualenvwrapper的方法,而不需要先安裝好virtualenv安裝virtualenv和生成虛擬環境安裝virtualenv:yum -y install python-virtualenv生成虛擬環境:先切換…

莫煩Matplotlib可視化第三章畫圖種類代碼學習

3.1散點圖 import matplotlib.pyplot as plt import numpy as npn 1024 X np.random.normal(0,1,n) Y np.random.normal(0,1,n) T np.arctan2(Y,X) #用于計算顏色plt.scatter(X,Y,s75,cT,alpha0.5)#alpha是透明度 #plt.scatter(np.arange(5),np.arange(5)) #一條線的散點…

計算機科學必讀書籍_5篇關于數據科學家的產品分類必讀文章

計算機科學必讀書籍Product categorization/product classification is the organization of products into their respective departments or categories. As well, a large part of the process is the design of the product taxonomy as a whole.產品分類/產品分類是將產品…

es6解決回調地獄問題

本文摘抄自阮一峰老師的 http://es6.ruanyifeng.com/#docs/generator-async 異步 所謂"異步",簡單說就是一個任務不是連續完成的,可以理解成該任務被人為分成兩段,先執行第一段,然后轉而執行其他任務,等做好…

交替最小二乘矩陣分解_使用交替最小二乘矩陣分解與pyspark建立推薦系統

交替最小二乘矩陣分解pyspark上的動手推薦系統 (Hands-on recommender system on pyspark) Recommender System is an information filtering tool that seeks to predict which product a user will like, and based on that, recommends a few products to the users. For ex…

莫煩Matplotlib可視化第四章多圖合并顯示代碼學習

4.1Subplot多合一顯示 import matplotlib.pyplot as plt import numpy as npplt.figure() """ 每個圖占一個位置 """ # plt.subplot(2,2,1) #將畫板分成兩行兩列,選取第一個位置,可以去掉逗號 # plt.plot([0,1],[0,1]) # # plt.su…