公司的網(wǎng)站建設費進入什么科目整合營銷傳播成功案例
1.CSS語法形式
CSS基本語法規(guī)則就是:選擇器+若干屬性聲明
由選擇器選擇一個元素,其中的屬性聲明就作用于該元素.
比如:
<body><p>這是一個段落</p><!-- style可以放在代碼的任意地方 --><style>p{/* 將字體顏色設置為紅色 */color: red;}</style>
</body>
上面的這種寫CSS的方式屬于內(nèi)部樣式.
實際上,有三種寫CSS的方式
內(nèi)部樣式:使用style標簽,直接將CSS寫到html文件中.(此時style標簽可以放在任意位置,一般建議放到head標簽里面)實例如上.
內(nèi)聯(lián)樣式:使用style屬性,針對指定的元素設置樣式.(此時不需要寫選擇器,可以直接寫屬性鍵值對),這個時候樣式只是針對當前元素生效.
<body><p>這是一個段落</p><p style="color:red; font-size:40px">這是另一個段落</p>
</body>
外部樣式:將CSS代碼單獨放在一個文件里,在通過link屬性,讓html引入該CSS.
<body><link rel="stylesheet" href="./css.css"><p>這是一個段落</p><p>這是另一個段落</p>
</body><!-- 下面是在另一個.css文件中 -->
p{color: red;font-size: 40px;
}
本文主要以內(nèi)部樣式作為實例代碼
2.CSS選擇器
標簽選擇器
在{}前面寫上標簽名字,此時意味著會選中當親頁面中的所有指定標簽
<body><p>這是一個段落</p><p>這是另一個段落</p><style>p {color: blue;font-size: 50px;}</style><div>這是一個div</div>
</body>
類選擇器
可以創(chuàng)建一個css類,收訂指定哪些元素應用這個類,這種指定方法更加實用(相比標簽選擇器)
一個元素可以引用一個類,也可以引用多個類.
<body><style>.one{color: blue;}.two{color: red;}.three{color: green;}.four{font-size: 100px;}</style><p class="one">這是第一個段落</p><p class="two">這是第二個段落</p><p class="three four">這是第三個段落</p>
</body>
ID選擇器
ID選擇器和類選擇器的不同之處為:ID選擇器是針對一個元素,而類選擇器可以針對一堆元素
因為ID是設置在元素里面的,而每個元素的ID都是唯一的.
<body><style>#one{color: blue;}#two{color: red;}#three{color: green;}</style><p id="one">這是第一個段落</p><p id="two">這是第二個段落</p><p id="three">這是第三個段落</p>
</body>
后代選擇器
后代選擇器的特點就是可以將多個基礎選擇器(前面提到的三個選擇器就是基礎選擇器)組合,并且將選中元素的后代全部選中
<body><style>ul li{color: red;}#one li{color: blue;} </style><ol id="one"><li>111</li><li>222</li><li>333</li></ol><ul><li>111</li><li>222</li><li>333</li></ul>
</body>
子選擇器
后代選擇器是將選中的后代元素全部選中,而子選擇器只選中它的全部子元素
<body><style> .one>a{color: red;}</style><p class="one"><a href="#">鏈接1</a><p><a href="#">鏈接2</a></p></p>
</body>
并集選擇器
并集選擇器是將多個選擇器合并到一起
<body><style>/*.one{font-size: 50px;}.two{font-size: 50px;}*//*上下兩種情況等價*/.one,.two{font-size: 50px;}</style><a href="#" class="one">鏈接</a><p class="two"><a href="#">鏈接</a></p>
</body>
偽類選擇器
偽類選擇器屬于復合選擇器的特殊用法,前面的選擇器選中某個元素,偽類選擇器選中某個元素的某個特定狀態(tài).
下面介紹兩種狀態(tài):
:hover 為鼠標懸停時候的狀態(tài)
:active 為鼠標按下時候的狀態(tài)
<body><style>.one:hover{color: red;}.one:active{font-size: 50px;}</style><div class="one">這是一個div</div>
</body>當鼠標放在"這是一個div"這句話上時,它會變成紅色,當點擊時會在紅色的基礎上變成50px的大小.
此處無法用圖片演示,就不放圖片了.
3.字體屬性
設置字體家族
font-family 當前使用哪種字體(指定的字體必須是系統(tǒng)已經(jīng)安裝了的)
<body><style>.one{font-size: 50px;font-family: '微軟雅黑';}.two{font-size: 50px;font-family: '宋體';}</style><div class="one">這是一個div</div><div class="two">這是一個div</div>
</body>
設置字體大小
font-size 在前面的實例中經(jīng)常出現(xiàn),此處不演示代碼了.
瀏覽器的每個文字都可以看做一個方框(英文和阿拉伯數(shù)字等可能比較窄)
當然,瀏覽器中的px值可能與設置的大小不一致,這是因為系統(tǒng)的瀏覽器縮放設置和顯示器的縮放設置不是100%.
比如在這種設置下40px,就會是50px大小.
設置字體粗細
使用font-weight來設置
實際設置值的時候,有兩種典型的風格.
使用單詞
使用數(shù)字
<body><style>.one{font-weight: bold;font-size: 50px;}.two{font-weight: 400;font-size: 50px;}</style><div class="one">這是一個div</div><div class="two">這是一個div</div>
</body>
文字傾斜
font-style:italic 設置傾斜
font-style:normal 取消傾斜
<body><style>.one{font-style: italic;font-size: 50px;}.two{font-style: normal;font-size: 50px;}</style><div class="one">這是一個div</div><div class="two">這是一個div</div>
</body>
4.文本屬性
文字顏色
首先我們要說一下計算機是如何表示顏色的.
顏色就是不同波長的光,白光就是由紅綠藍三原色等比例混合成的.
計算機表示顏色,有一種典型的方式,就是RGB(red紅 green綠 blue藍)
在計算機中會給RGB各分配一個字節(jié)(0-255)通過這三個分量的不同比例搭配,就可以調(diào)和出不同的顏色
在css中是用color來表示的
<body><style>.one{color: rgb(255, 0, 0);font-size: 50px;}.two{color: rgb(0, 125, 100);font-size: 50px;}</style><div class="one">這是一個div</div><div class="two">這是一個div</div>
</body>
此外還可以通過#的方式去表示(后面6位十六進制數(shù)字每兩位代表一個字節(jié))
<body><style>.one{color: #ff0000;font-size: 50px;}.two{color: #00ff00;font-size: 50px;}</style><div class="one">這是一個div</div><div class="two">這是一個div</div>
</body>
若是每個分量的2位十六進制數(shù)字都相同,就可以將6位十六進制縮寫成3位十六進制
比如:#000000 就可以縮寫成#000
顏色還可以使用單詞來表示,比如:red,blue,green.....前面的案例有不少都使用過了,此處不給代碼演示了.
文本對齊
text-align
<body><style>.one{text-align: right;font-size: 50px;}.two{text-align: center;font-size: 50px;}</style><div class="one">這是一個div</div><div class="two">這是一個div</div>
</body>
文本裝飾
text-decoration
underline 下劃線
none 可以給a標簽去下劃線
overline 上劃線(不常用)
line-through 刪除線(不常用)
<body><style>.one{text-decoration: underline;font-size: 50px;}.two{text-decoration: none;}</style><div class="one">這是一個div</div><a href="#" class="two">這是一個鏈接</a>
</body>
文本縮進
text-indent
它的設置單位可以是px,也可以是em
px是一個絕對的單位,固定就是多大
em是一個相對的單位,會根據(jù)當前文字的大小尺寸來設置的.
比如文字大小為40px
1em就是40px
2em就是80px
0.5em就是20px
此外,文本的縮進大小還可以是負數(shù),也就是反向縮進(向左縮進).
<body><style>.one{text-indent: -2em;font-size: 50px;}.two{text-indent: 2em;font-size: 50px;}</style><div class="one">這是一個div</div><div class="two">這是一個div Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam modi natus tempore sequi ex quasi omnis cum sint maxime! Facilis provident odit placeat. Quo fugit, quaerat incidunt in molestiae ut! Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque blanditiis tempore commodi voluptates repellat at? Nobis natus iste hic ut, accusamus at corporis, error obcaecati ullam voluptatem aspernatur, consectetur magnam?</div>
</body>
行高
line-height
行高=文字高度+行間距
如上圖,其中任意兩根顏色相同的線之間的距離都代表一個行高(綠色是頂線,藍色是中線,紅色是基線(英文第三條線),粉色是底線)
通過設置行高可以達到設置行間距的目的.
<body><style>.one{line-height: 100px;text-indent: 2em;font-size: 40px;}.two{line-height: 70px;text-indent: 2em;font-size: 40px;}</style><div class="one">這是一個div</div><div class="two">這是一個div Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam modi natus tempore sequi ex quasi omnis cum sint maxime! Facilis provident odit placeat. Quo fugit, quaerat incidunt in molestiae ut! Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque blanditiis tempore commodi voluptates repellat at? Nobis natus iste hic ut, accusamus at corporis, error obcaecati ullam voluptatem aspernatur, consectetur magnam?</div>
</body>
背景顏色
background
<body><style>.one{background-color: rgb(70, 30, 90);text-indent: 2em;color: red;font-size: 30px;}.two{background-color: rgb(70, 30, 90);text-indent: 2em;color: red;font-size: 30px;}</style><div class="one">這是一個div</div><div class="two">這是一個div Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam modi natus tempore sequi ex quasi omnis cum sint maxime! Facilis provident odit placeat. Quo fugit, quaerat incidunt in molestiae ut! Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque blanditiis tempore commodi voluptates repellat at? Nobis natus iste hic ut, accusamus at corporis, error obcaecati ullam voluptatem aspernatur, consectetur magnam?</div>
</body>
背景圖片
background-image:url(圖片路徑) 此時引入背景圖片后會進行平鋪
<body><style>.one{text-indent: 2em;color: red;font-size: 30px;}.two{background-image: url(./apple.jpeg);text-indent: 2em;color: red;font-size: 30px;}</style><div class="one">這是一個div</div><div class="two">這是一個div Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam modi natus tempore sequi ex quasi omnis cum sint maxime! Facilis provident odit placeat. Quo fugit, quaerat incidunt in molestiae ut! Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque blanditiis tempore commodi voluptates repellat at? Nobis natus iste hic ut, accusamus at corporis, error obcaecati ullam voluptatem aspernatur, consectetur magnam?</div>
</body>
若是不想平鋪,則可以使用background-repeat: no-repeat
<body><style>.one{text-indent: 2em;color: red;font-size: 30px;}.two{background-image: url(./apple.jpeg);background-repeat: no-repeat;text-indent: 2em;color: red;font-size: 30px;}</style><div class="one">這是一個div</div><div class="two">這是一個div Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam modi natus tempore sequi ex quasi omnis cum sint maxime! Facilis provident odit placeat. Quo fugit, quaerat incidunt in molestiae ut! Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque blanditiis tempore commodi voluptates repellat at? Nobis natus iste hic ut, accusamus at corporis, error obcaecati ullam voluptatem aspernatur, consectetur magnam?</div>
</body>
此時發(fā)現(xiàn)圖片出現(xiàn)在左上角
若想讓它的位置改變則需要這個:background-position
后面寫兩個參數(shù),一個是豎直高度,一個是水平長度.
這個參數(shù)可以是單詞,比如:center中心,right右邊,left左邊,bottom下面,top上面
<body><style>.one{text-indent: 2em;color: red;font-size: 30px;}.two{background-image: url(./apple.jpeg);background-repeat: no-repeat;background-position: top center;text-indent: 2em;color: red;font-size: 30px;}</style><div class="one">這是一個div</div><div class="two">這是一個div Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam modi natus tempore sequi ex quasi omnis cum sint maxime! Facilis provident odit placeat. Quo fugit, quaerat incidunt in molestiae ut! Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque blanditiis tempore commodi voluptates repellat at? Nobis natus iste hic ut, accusamus at corporis, error obcaecati ullam voluptatem aspernatur, consectetur magnam?</div>
</body>
除了用單詞之外,還可以用坐標,這里注意坐標系是一個左手系,如下圖
除了可以設置背景圖的位置,還可以設置背景圖的大小
background-size
<body><style>.one{text-indent: 2em;color: red;font-size: 30px;}.two{background-image: url(./apple.jpeg);background-repeat: no-repeat;background-position: top center;background-size: contain;text-indent: 2em;color: red;font-size: 30px;}</style><div class="one">這是一個div</div><div class="two">這是一個div Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam modi natus tempore sequi ex quasi omnis cum sint maxime! Facilis provident odit placeat. Quo fugit, quaerat incidunt in molestiae ut! Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque blanditiis tempore commodi voluptates repellat at? Nobis natus iste hic ut, accusamus at corporis, error obcaecati ullam voluptatem aspernatur, consectetur magnam?</div>
</body>contain保證整張圖都在里面
cover保證圖片可以覆蓋到每一個角落
除了用單詞還可以用具體數(shù)字去表示,比如(400px 500px)
5.圓角矩形
圓角矩形就是將矩形的邊角變成圓弧
使用方法為border-radius:(這里是長度)
上面輸入的長度,指的是矩形兩邊的內(nèi)切圓的半徑長度
<body><style>.one{text-indent: 2em;color: red;font-size: 30px;}.two{height: 100px;width: 200px;line-height: 100px;text-align: center;background-color: orange;color: rgb(255, 255, 255);border-radius:10px;}</style><div class="two">這是一個div</div>
</body>
若半徑的長度為高度的一半時,此時是一個膠囊的形狀
若這個矩形原本就是一個正方形,此時是一個圓形
6.CSS盒子模型
設置邊框
設置邊框需要用到boder屬性,直接設置了四個方向
還可以使用boder-left,boder-right,boder-top,boder-bottom去各自設置各自的方向.
設置邊框主要設置三個方面:
邊框的粗細
邊框的顏色
邊框的風格(實線,虛線等)
solid是實線
dashed是虛線
dotted是點構成的線...
<body><style>.one{text-indent: 2em;color: red;font-size: 30px;}.two{height: 100px;width: 200px;line-height: 100px;text-align: center;background-color: orange;color: rgb(255, 255, 255);border: 5px black solid;}</style><div class="two">這是一個div</div>
</body>
但是邊框的存在會擴大其原有的面積,上圖中的內(nèi)容為200*100,有了邊框為210*110
但是很多時候,我們不希望邊框修改原有的尺寸
此時可以加上box-sizing:border-box
<body><style>.one{text-indent: 2em;color: red;font-size: 30px;}.two{height: 100px;width: 200px;line-height: 100px;text-align: center;background-color: orange;color: rgb(255, 255, 255);border: 5px black solid;box-sizing: border-box;}</style><div class="two">這是一個div</div>
</body>此時就是200*100了
內(nèi)邊距
設置內(nèi)容和邊框之間的距離
padding 四邊全設置
padding-left 左邊距
padding-right右邊距
padding-top上邊距
padding-bottom下邊距
<body><style>.one{text-indent: 2em;color: red;font-size: 30px;}.two{height: 100px;width: 200px;line-height: 100px;text-align: left;background-color: orange;color: rgb(255, 255, 255);border: 5px black solid;box-sizing: border-box;padding-left: 10px;}</style><div class="two">這是一個div</div>
</body>首先讓文本貼近左側邊框(text-align:left),這一步是為了讓效果明顯一點
然后設置左側內(nèi)邊距為10px,效果如下
若使用padding可以有多種寫法:
padding:10px 四邊全都10px
padding:10px 20px 上下為10px,左右為20px
padding:10px 20px 30px 40px 順序為上右下左(順時針)
外邊距
設置元素和元素之間的距離
margin
和內(nèi)邊距基本相同可以設置上下左右的外邊距通過(margin-left.....)
同時margin去設置四邊的方法和padding也是相同的
<body><style>.two{height: 100px;width: 200px;line-height: 100px;text-align: left;background-color: orange;color: rgb(255, 255, 255);border: 5px black solid;box-sizing: border-box;padding-left: 10px;margin-bottom: 5px;}.three{width: 200px;height: 100px;background-color: red;text-align: top;}</style><div class="two">這是一個div</div><div class="three">這是另一個div</div>
</body>
margin還有一個特殊用法:讓margin-left和margin-right都設置為auto(讓瀏覽器自動設置)
此時該元素在父元素內(nèi)部為水平居中放置
<body><style>.two{height: 100px;width: 200px;line-height: 100px;text-align: left;background-color: orange;color: rgb(255, 255, 255);border: 5px black solid;box-sizing: border-box;margin-bottom: 5px;}.three{width: 200px;height: 100px;background-color: red;text-align: top;}.four{width: 50px;height: 50px;margin-left: auto;margin-right: auto;background-color: #fff;}</style><div class="two"><div class="four"></div></div><div class="three">這是另一個div</div>
</body>
若是同時將top和bottom都設置為auto,此時是不會變成垂直居中的
7.彈性布局
彈性布局是實現(xiàn)html布局的一種方式.
彈性布局主要是解決"水平方向排列"的問題
開啟彈性布局
dispaly:flex
給要水平排列的元素的父元素,設置flex
此時彈性容器里面的元素,則不再是"塊級元素""行內(nèi)元素",而是成為了"彈性元素",是遵守彈性布局的,可以設置尺寸和邊距的.
沒設置彈性布局之前:
<body><style>div{background-color: red;width: 100%;height: 150px;}div>span{width: 100px;background-color: green;}</style><div><span>1</span><span>2</span><span>3</span></div>
</body>
設置之后:
<body><style>div{background-color: red;width: 100%;height: 150px;display: flex;}div>span{width: 100px;background-color: green;}</style><div><span>1</span><span>2</span><span>3</span></div>
</body>
設置元素水平方向的排列方式
justify-content: sapce-start 為靠左排列,space-end為靠右排列,space-center居中排列,space-around被空白環(huán)繞(左右都有),space-between被空白環(huán)繞(最左和最右兩側沒有)
space-around
space-between
<body><style>div{background-color: red;width: 100%;height: 150px;display: flex;justify-content: space-between;}div>span{width: 100px;background-color: green;}</style><div><span>1</span><span>2</span><span>3</span></div>
</body>
設置元素垂直方向的排列方式
align-items:flex-start靠上,flex-end靠下,center居中
<body><style>div{background-color: red;width: 100%;height: 150px;display: flex;justify-content: space-between;align-items: flex-end;}div>span{width: 100px;height: 100px;background-color: green;}</style><div><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></div>
</body>