国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

<label id="3jawu"><noframes id="3jawu">

<mark id="3jawu"></mark>

<li id="3jawu"><em id="3jawu"></em></li>

CSS 文本樣式入門教程：字體、顏色和大小

1年前作者：_慢漫漫慢分類：Toy博客閱讀(27)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了CSS 文本樣式入門教程：字體、顏色和大小。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

CSS從入門到精通-文本與字體樣式

第1關(guān) 字體顏色、類型與大小

CSS 文本樣式,CSS 入門

CSS 文本樣式,CSS 入門

body {
    /*背景漸變*/
    background: -webkit-linear-gradient(left, #7ECABA, #E2FCCB);
    /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #7ECABA, #E2FCCB);
    /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #7ECABA, #E2FCCB);
    /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #7ECABA, #E2FCCB);
    /* 標(biāo)準(zhǔn)的語法 */
    font: 100% PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
    /*居中頁面*/
    width: 45em;
    margin: 0 auto;
}

h1,
h2 {
    /* ********** BEGIN ***********/
    font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
    /* ********** END ***********/
}

h1 {
    /* ********** BEGIN ***********/
    font-size: 2.1875em;

    /* ********** END ************/
}

h2 {
    background-color: #eaebef;
    /* ********** BEGIN ***********/
    font-size: 1.75em;
    color: #7d717c;
    /* ********** END ************/
}

h3 {
    background-color: white;
    /* ********** BEGIN ***********/
    font-size: 1.25em;
    color: green;
    /* ********** END ************/
    padding-left: 10px;
}

hr {
    height: 1px;
    border: none;
    border-top: 2px dashed #88b2d2;
}

footer {
    margin: 10px auto;
}

/* CONTENT
----------------------------------- */

.architect {
    background-color: #fff;
    padding: 1.5em 1.75em;
}

/* :::: Intro ::::: */

.intro {
    background-color: #888888;
    /* ********** BEGIN ***********/
    
    color: #fefefe;
    /* ********** END ************/
    padding: 1px 1.875em .7em;
}

.intro .subhead {
    /* ********** BEGIN ***********/
    font-size: 1.125em;
    /* ********** END ************/
}

.intro p {
    font-size: 1.0625em;
}

/* :::: chapter Descriptions ::::: */

.chapter p {
    font-size: .9375em;
}

img {
    border-radius: 8px;
}

/* :::: Links :::: */

a:link {
    color: #e10000;
}

a:visited {
    color: #b44f4f;
}

a:hover {
    color: #f00;
}

.intro a {
    color: #fdb09d;
}

.intro a:hover {
    color: #fec4b6;
}

第2關(guān) 字體粗細(xì)與風(fēng)格

CSS 文本樣式,CSS 入門

body {
    /*背景漸變*/
    background: -webkit-linear-gradient(left, #7ECABA, #E2FCCB);
    /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #7ECABA, #E2FCCB);
    /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #7ECABA, #E2FCCB);
    /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #7ECABA, #E2FCCB);
    /* 標(biāo)準(zhǔn)的語法 */
    font: 100% PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
    /*居中頁面*/
    width: 45em;
    margin: 0 auto;
}

h1,
h2 {
    /* 設(shè)置h1, h2 的font-family*/
    font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
    /* ********** BEGIN ***********/
    font-weight: normal;
    /* ********** END ***********/
}

h1 {
    /* 設(shè)置h1元素為 35px 的字體大小 */
    font-size: 2.1875em;
    /* 35px/16px */
}

h2 {
    background-color: #eaebef;
    /* 設(shè)置h2元素的字體顏色為：#7d717c */
    color: #7d717c;
    /* 使用em的方式設(shè)置h2元素為 28px 的字體大小 */
    font-size: 1.75em;
    /*28px/16px */
}

h3 {
    background-color: white;
    /* 使用em的方式設(shè)置h3元素為 20px 的字體大小 */
    font-size: 1.25em;
    /* 設(shè)置h3元素的字體顏色為：green */
    color: green;
    padding-left: 10px;
}

hr {
    height: 1px;
    border: none;
    border-top: 2px dashed #88b2d2;
}

/* 子選擇器 */

em,
a:link,
.intro .subhead {
    font-weight: bold;
}

footer {
    /* ********** BEGIN ***********/
    font-weight: light;
    font-style: italic;
    /* ********** END ***********/
    margin: 10px auto;
}

footer a {
    font-style: normal;
}

/* CONTENT
----------------------------------- */

.architect {
    background-color: #fff;
    padding: 1.5em 1.75em;
}

/* :::: Intro ::::: */

.intro {
    background-color: #888888;
    /* 設(shè)置 .intro 類元素的字體顏色為 #fefefe */
    color: #fefefe;
    padding: 1px 1.875em .7em;
}

.intro .subhead {
    /* 使用em的方式設(shè)置 `.intro .subhead ` （intro類下得subhead子類）為 18px 的字體大小。 */
    font-size: 1.125em;
}

.intro p {
    font-size: 1.0625em;
}

/* :::: chapter Descriptions ::::: */

.chapter p {
    font-size: .9375em;
}

img {
    border-radius: 8px;
}

/* :::: Links :::: */

a:link {
    /* 設(shè)置 a:link 元素的字體顏色為 #b44f4f */
    color: #e10000;
}

a:visited {
    color: #b44f4f;
}

a:hover {
    color: #f00;
}

.intro a {
    color: #fdb09d;
}

.intro a:hover {
    color: #fec4b6;
}

第3關(guān) 文本裝飾與文本布局

CSS 文本樣式,CSS 入門

body {
    /*背景漸變*/
    background: -webkit-linear-gradient(left, #7ECABA, #E2FCCB);
    /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #7ECABA, #E2FCCB);
    /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #7ECABA, #E2FCCB);
    /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #7ECABA, #E2FCCB);
    /* 標(biāo)準(zhǔn)的語法 */
    font: 100% PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
    /*居中頁面*/
    width: 45em;
    margin: 0 auto;
}

h1,
h2 {
    font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
    font-weight: normal;
    /*********** BEGIN ***********/
    text-align: center;
    /************ END ************/
}

h1 {
    /* 設(shè)置h1元素為 35px 的字體大小 */
    font-size: 2.1875em;
    /* 35px/16px */
}

h2 {
    background-color: #eaebef;
    /* 設(shè)置h2元素的字體顏色為：#7d717c */
    color: #7d717c;
    /* 使用em的方式設(shè)置h2元素為 28px 的字體大小 */
    font-size: 1.75em;
    /*28px/16px */
}

h3 {
    background-color: white;
    /* 使用em的方式設(shè)置h3元素為 20px 的字體大小 */
    font-size: 1.25em;
    /* 設(shè)置h3元素的字體顏色為：green */
    color: green;
    padding-left: 10px;
    /*********** BEGIN ***********/
    text-align: left;
    /************ END ************/
}

p {
    text-align: justify;
}

hr {
    height: 1px;
    border: none;
    border-top: 2px dashed #88b2d2;
}

/* 子選擇器 */

em,
a:link,
.intro .subhead {
    font-weight: bold;
}

footer {
    font-weight: light;
    font-style: italic;
    /* ********** BEGIN ***********/
    text-align: center;
    /* ********** END ***********/
    margin: 10px auto;
}

footer a {
    font-style: normal;
}

/* CONTENT
----------------------------------- */

.architect {
    background-color: #fff;
    padding: 1.5em 1.75em;
}

/* :::: Intro ::::: */

.intro {
    background-color: #888888;
    /* 設(shè)置 .intro 類元素的字體顏色為 #fefefe */
    color: #fefefe;
    padding: 1px 1.875em .7em;
}

.intro .subhead {
    /* 使用em的方式設(shè)置 `.intro .subhead ` （intro類下得subhead子類）為 18px 的字體大小。 */
    font-size: 1.125em;
    text-align: center;
}

.intro p {
    font-size: 1.0625em;
}

/* :::: chapter Descriptions ::::: */

.chapter p {
    font-size: .9375em;
}

.photos {
    /*********** BEGIN ***********/
    text-align: center;
    /*********** END *************/
}

img {
    border-radius: 8px;
}

/* :::: Links :::: */

/* 默認(rèn)顯示樣式 */

a:link {
    color: #e10000;
    /*********** BEGIN ***********/
    text-decoration: none;
    /*********** END *************/
}

a:visited {
    color: #b44f4f;
}

/* 鼠標(biāo)放在上面的顯示樣式 */

a:hover {
    color: #f00;
    /*********** BEGIN ***********/
    text-decoration: underline;
    /*********** END *************/
}

.intro a {
    color: #fdb09d;
}

.intro a:hover {
    color: #fec4b6;
}

CSS從入門到精通-背景樣式

第1關(guān) 背景顏色

CSS 文本樣式,CSS 入門

/* ********** BEGIN ********** */
body {
    background-color: ivory;
}


/* ********** END ********** */

h1 {
    font-size: 40px;
    text-align: center;
}

p {
    font-size: 18px;
    color: grey;
    /* ********** BEGIN ********** */
    background-color: lightblue;
    /* ********** END ********** */
}

第2關(guān) 背景圖片

CSS 文本樣式,CSS 入門

body {
    /* ********** BEGIN ********** */
    /*設(shè)置背景圖片*/
    background-image:url("https://www.educoder.net/attachments/download/211106") ;

    /* ********** END ********** */
}

div {
    width: 90%;
    height: 100%;
    margin: auto;
}

第3關(guān) 背景定位與背景關(guān)聯(lián)

CSS 文本樣式,CSS 入門

 body {
     margin-right: 200px;
     /* ********** BEGIN ********** */
     /*設(shè)置背景圖片*/
    background: url("https://www.educoder.net/attachments/download/211104") no-repeat fixed right top;
     /* ********** END ********** */
 }

 div {
     width: 90%;
     height: 100%;
     margin: auto;
 }

CSS從入門到精通-基礎(chǔ)選擇器

第1關(guān) CSS 元素選擇器

CSS 文本樣式,CSS 入門

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>元素選擇器</title>
  <style type="text/css">
    /* ********** BEGIN ********** */
    /* 元素選擇器 */
    html {
      background-color:#F0F0F0;
    }

    header {
      padding:40px;
      background-color:white;
    }


    footer {
      margin-top: 20px;
      font-size:0.6em;
      color:grey;
    }

    /* ********** END ********** */
  </style>
</head>
<body>

<div>

  <header>
    <li><a href="#chosen">精選</a></li>
    <li><a href="#news">時(shí)事</a></li>
    <li><a href="#finance">財(cái)政</a></li>
    <li><a href="#think">思想</a></li>
    <li><a href="#life">生活</a></li>
  </header>

  <div>
    <section>
      <h2>精選</h2>
      <li>精選新聞1</li>
      <li>精選新聞2</li>
      <li>精選新聞3</li>
    </section>
    <section>
      <h2>時(shí)事</h2>
      <li>時(shí)事新聞1</li>
      <li>時(shí)事新聞2</li>
      <li>時(shí)事新聞3</li>
    </section>
    <section>
      <h2>財(cái)政</h2>
      <li>財(cái)政新聞1</li>
      <li>財(cái)政新聞2</li>
      <li>財(cái)政新聞3</li>
    </section>
    <section>
      <h2>思想</h2>
      <li>思想新聞1</li>
      <li>思想新聞2</li>
      <li>思想新聞3</li>
    </section>
    <section>
      <h2>生活</h2>
      <li>生活新聞1</li>
      <li>生活新聞2</li>
      <li>生活新聞3</li>
    </section>
  </div>

  <footer>Copyright (c) News Copyright Holder All Rights Reserved.</footer>

</div>

</body>
</html>

第2關(guān) CSS 類選擇器

CSS 文本樣式,CSS 入門

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>類選擇器</title>
  <style type="text/css">
    /* 元素選擇器 */
    html {
      background-color: #F0F0F0;
    }
    header {
      padding: 40px;
      background-color: white;
    }
    footer {
      margin-top: 20px;
      font-size: 0.6em;
      color: grey;
    }
    /* 類選擇器 */
    .main {
      margin: 10px;
    }
	/* ********** BEGIN ********** */
  .newsSection {
    margin-top:20px;
    padding:20px;
    background-color:white;
  }


    /* ********** END ********** */
  </style>
</head>
<body>
<div class="main">
  <header>
    <li><a href="#chosen">精選</a></li>
    <li><a href="#news">時(shí)事</a></li>
    <li><a href="#finance">財(cái)政</a></li>
    <li><a href="#think">思想</a></li>
    <li><a href="#life">生活</a></li>
  </header>
  <!-- ********** BEGIN ********** -->
  <div class="newsSection">
  <!-- ********** END ********** -->      
    <section>
      <h2>精選</h2>
      <li>精選新聞1</li>
      <li>精選新聞2</li>
      <li>精選新聞3</li>
    </section>
    <section>
      <h2>時(shí)事</h2>
      <li>時(shí)事新聞1</li>
      <li>時(shí)事新聞2</li>
      <li>時(shí)事新聞3</li>
    </section>
    <section>
      <h2>財(cái)政</h2>
      <li>財(cái)政新聞1</li>
      <li>財(cái)政新聞2</li>
      <li>財(cái)政新聞3</li>
    </section>
    <section>
      <h2>思想</h2>
      <li>思想新聞1</li>
      <li>思想新聞2</li>
      <li>思想新聞3</li>
    </section>
    <section>
      <h2>生活</h2>
      <li>生活新聞1</li>
      <li>生活新聞2</li>
      <li>生活新聞3</li>
    </section>
  </div>
  
  <footer>Copyright (c) News Copyright Holder All Rights Reserved.</footer>
</div>

</body>
</html>

第3關(guān) CSS id選擇器

CSS 文本樣式,CSS 入門

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>ID選擇器</title>
  <style type="text/css">
    /* 元素選擇器 */
    html {
      background-color: #F0F0F0;
    }
    header {
      padding: 40px;
      background-color: white;
    }
    footer {
      margin-top: 20px;
      font-size: 0.6em;
      color: grey;
    }

    /* 類選擇器 */
    .main {
      margin: 10px;
    }
    .newsSection {
      margin-top: 20px;
      padding: 20px;
      background-color: white;
    }
    /* ********** BEIGN ********** */
    #menu {

    }
    #chosen {
      color:red;
    }
    #news {
      color:blue;
    }
    #finance {
      color:olive;
    }
    #think {
      color:green;
    }
    #life {
      color:orange;
    }
    

    /*選擇menu元素下的li子元素*/
    #menu li {
      float: left;
      width: 70px;
      font-size: 1.2em;
      font-weight: lighter;
    }
    /*選擇menu元素下的li子元素和li下得a子元素*/
    #menu li, li a {
      list-style: none;
      text-decoration: none;
    }
    /* ********** END ********** */
  </style>
</head>
<body>
<div class="main">
  <!-- ********** BEGIN ********** -->
  <header id="menu">
  <!-- ********** END ********** -->
    <li><a href="#chosen">精選</a></li>
    <li><a href="#news">時(shí)事</a></li>
    <li><a href="#finance">財(cái)政</a></li>
    <li><a href="#think">思想</a></li>
    <li><a href="#life">生活</a></li>
  </header>

  <div class="newsSection">
    <section>
      <h2 id="chosen">精選</h2>
      <li>精選新聞1</li>
      <li>精選新聞2</li>
      <li>精選新聞3</li>
    </section>
    <section>
      <h2 id="news">時(shí)事</h2>
      <li>時(shí)事新聞1</li>
      <li>時(shí)事新聞2</li>
      <li>時(shí)事新聞3</li>
    </section>
    <section>
      <h2 id="finance">財(cái)政</h2>
      <li>財(cái)政新聞1</li>
      <li>財(cái)政新聞2</li>
      <li>財(cái)政新聞3</li>
    </section>
    <section>
      <h2 id="think">思想</h2>
      <li>思想新聞1</li>
      <li>思想新聞2</li>
      <li>思想新聞3</li>
    </section>
    <section>
      <h2 id="life">生活</h2>
      <li>生活新聞1</li>
      <li>生活新聞2</li>
      <li>生活新聞3</li>
    </section>
  </div>
  <footer>Copyright (c) News Copyright Holder All Rights Reserved.</footer>
</div>

</body>
</html>

使用HTML/CSS實(shí)現(xiàn)Educoder頂部導(dǎo)航欄

第1關(guān) 使用flex布局實(shí)現(xiàn)Educoder頂部導(dǎo)航欄容器布局

CSS 文本樣式,CSS 入門

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Educoder</title>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<script src="step1/verify.js"></script>
</head>
<style type="text/css">
	body {
		padding: 0;
		margin: 0;
	}

	.color-white {
		color: white;
	}

	/*********** Begin ************/
	.container {
		height: 60px;
		display: flex;
		justify-content: space-between;
	}

	/*********** End ************/
</style>

<body>
	<div class="container">
		<header style="background: #24292D; min-width:1200px;">
			<div class="left-wrap color-white">左邊容器</div>
			<div class="right-wrap color-white">右邊容器</div>
		</header>
	</div>
</body>

</html>

第2關(guān) 實(shí)現(xiàn)左側(cè)文字導(dǎo)航列表

CSS 文本樣式,CSS 入門

CSS 文本樣式,CSS 入門

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Educoder</title>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<script src="step2/verify.js"></script>
</head>
<style type="text/css">
	body {
		padding: 0;
		margin: 0;
	}

	.container {
		min-width: 1200px;
	}

	.flex {
		display: flex;
	}

	.full-height {
		height: 100%;
	}

	header {
		background: #24292D;
		height: 60px;
		justify-content: space-between;
		padding: 0 25px;
	}

	header>div {
		height: 100%;
		display: flex;
		align-items: center;
	}

	/*********** Begin ************/
	.logo-block {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.logo {
		width: 40px;
		height: 38px;
		margin-right: 30px;
	}

	.menu-item {
		color: #ffffff;
		font-size: 16px;
		width: 64px;
		height: 100%;
		display: flex;
		align-items: center;
		margin-right: 30px;
		position: relative;
	}

	.hot {
		position: absolute;
		top: 10px;
		right: -22px;
	}

	/*********** End ************/
</style>

<body>
	<div class="container">
		<header class="flex">
			<div class="left-wrap">
				<!--********** Begin **********-->
				<div class="logo-block">
					<img src="https://data.educoder.net/images/educoder/headNavLogo.png?1526520218" class="logo">
      </div>
					<div class="menu-block full-height flex">
						<div class="menu-item"><span>實(shí)踐課程</span></div>
						<div class="menu-item"><span>翻轉(zhuǎn)課堂</span></div>
						<div class="menu-item"><span>實(shí)訓(xùn)項(xiàng)目</span></div>
						<div class="menu-item">
							<span>在線競(jìng)賽<img class="hot" src="https://img-blog.csdnimg.cn/2022010612112358534.png"></span>
						</div>
						<div class="menu-item"><span>教學(xué)案例</span></div>
						<div class="menu-item"><span>交流問答</span></div>
					</div>
					<!--********** End **********-->
				</div>
				<div class="right-wrap">
				</div>
		</header>
	</div>
</body>

</html>

第3關(guān) 實(shí)現(xiàn)右側(cè)功能圖標(biāo)排序

CSS 文本樣式,CSS 入門

CSS 文本樣式,CSS 入門

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Educoder</title>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script src="step3/verify.js"></script>
</head>
<style type="text/css">
  body {
    padding: 0;
    margin: 0;
  }

  .container {
    min-width: 1200px;
  }

  .flex {
    display: flex;
  }

  .full-height{
    height: 100%;
  }

  header {
    background: #24292D;
    height: 60px;
    justify-content: space-between;
    padding: 0 25px;
  }

  header > div {
    height: 100%;
    display: flex;
    align-items: center;
  }

  .logo-block{
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .logo {
    width: 40px;
    height: 38px;
    margin-right: 30px;
  }

  .menu-item {
    color: #ffffff;
    font-size: 16px;
    width: 64px;
    height: 100%;
    display: flex;
    align-items: center;
    margin-right: 30px;
    position: relative;
  }

  .hot{
    position: absolute;
    top: 10px;
    right: -22px;
  }
  /*********** Begin ************/
  .icon-item{
    height: 100%;
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .user{
    width: 34px;
    height: 34px;
    margin-left: 15px;
  }
  /*********** End ************/
</style>
<body>
<div class="container">
  <header class="flex">
    <div class="left-wrap">
      <div class="logo-block">
        <img src="https://www.educoder.net/images/educoder/headNavLogo.png?1526520218" class="logo">
      </div>
      <div class="menu-block full-height flex">
        <div class="menu-item"><span>實(shí)踐課程</span></div>
        <div class="menu-item"><span>翻轉(zhuǎn)課堂</span></div>
        <div class="menu-item"><span>實(shí)訓(xùn)項(xiàng)目</span></div>
        <div class="menu-item"><span>在線競(jìng)賽<img class="hot" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAQCAYAAAAFzx/vAAACl0lEQVRIS62UP0gbURzHP09DUrHW1EqHuLhYBC0t1NOCg4M432IXhxZKDwShxUA7iuLmoLUEXHSRghk1OLgaaCrnn6FD6aFUEDoIYq5NxBBNXnkvl3hWi4N5y927e+/3+f2+vz9CQhCYAl4C96nSkoC4sJUGFoEPQsJH4F2VODeZmVVARQ/fdPI2/1W0XsSuAqr30qqrg85O2N0F1726V2ciEejqQp6fI1IppOsivG9+p5TRguOQcxxOgbzaK5kvAQ0DbBtME5lIgGEg/PupKUQ0CtksBIOQz8PQEDIQQKysXBFhf3yc3YmJSkQ1/wNK0wQfUO8PDhBbW8j5eRgehnAYsb6ObGzkuLWVQ+DUMHhm22ybJr/VfUBDfE8dYUVTLyK5tASOAy0tCMtCAUVzMywsIPv6EMmklic3Okr99DRf2trI7e1x1zDosW2+mSaZf4AVeNGfwzJQ5TCTgVAI0dGhJda5m5uD3l5yqRQ/gcDICI9iMba7u8ltblJvGDy1bb77gApUbg8d7XVADfAkVTnVEabTkEySjUZxZmY4AdqXl2nq72enoUHn6Y5h8MS2+WGa/Ekk/H2o5VVgBdRtob3wikYDfEDlwFkiQX51lbqBAdIbG9SGQoR7ejgYG+NwclIbVMDHto3jAf1VpFJQA2lRgFngrfZAyWZZEI+XchiJULAsTuJxfjkOLtA0OEhDezuyWCSzs8PJ2lqlCgORCA8ti6N4XLdDuTaKXh9K+KSKJlgsjbZXAsIXTQk54Ag4Bs6AWq/alHPlc0oZ9a6MquUzrr97/9wCLD6A975xV7og4Svw3Lu/BrwQkL3NpPHfvQ64D7QCn4HXohRc1dZ1QDWJYnqy+1umSshLQAn3gDcCpqtk/4qZv02gFT1dbcRiAAAAAElFTkSuQmCC"></span></div>
        <div class="menu-item"><span>教學(xué)案例</span></div>
        <div class="menu-item"><span>交流問答</span></div>
      </div>
    </div>
    <div class="right-wrap">
      <!--********** Begin **********-->
      <div class="icon-list full-height flex">
      <div class="icon-item"><img src="https://data.educoder.net/api/attachments/411643" alt=""></div>
      <div class="icon-item"><img src="https://data.educoder.net/api/attachments/411644" alt=""></div>
      <div class="icon-item"><img src="https://data.educoder.net/api/attachments/411645" alt=""></div>
      </div>
      <img class="user" src="https://data.educoder.net/images/avatars/User/b?t=1569204859650" alt="">
      <!--********** End **********-->
    </div>
  </header>
</div>
</body>
</html>

第4關(guān) 實(shí)現(xiàn)左側(cè)鼠標(biāo)懸停效果與選中狀態(tài)

CSS 文本樣式,CSS 入門文章來源地址http://www.zghlxwxcb.cn/news/detail-412485.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Educoder</title>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script src="step4/verify.js"></script>
</head>
<style type="text/css">
  body {
    padding: 0;
    margin: 0;
  }

  .container {
    min-width: 1200px;
  }

  .flex {
    display: flex;
  }

  .full-height {
    height: 100%;
  }

  header {
    background: #24292D;
    height: 60px;
    justify-content: space-between;
    padding: 0 25px;
  }

  header > div {
    height: 100%;
    display: flex;
    align-items: center;
  }

  .logo-block {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .logo {
    width: 40px;
    height: 38px;
    margin-right: 30px;
  }

  .menu-item {
    color: #ffffff;
    font-size: 16px;
    width: 64px;
    height: 100%;
    display: flex;
    align-items: center;
    margin-right: 30px;
    position: relative;
    cursor: pointer;
  }

  .hot {
    position: absolute;
    top: 10px;
    right: -22px;
  }

  .icon-item {
    height: 100%;
    width: 48px;
    display: flex;
    align-items: center;
    cursor: pointer;
    justify-content: center;
  }

  .user {
    width: 34px;
    height: 34px;
    margin-left: 15px;
    cursor: pointer;
  }

  /*********** Begin ************/
  .menu-item:hover {
    opacity:.7;
  }
  .active {
    position:relative;
    color:#459be5;
  }
  .active:after {
    position:absolute;
    content: ' ';
    width: 14px;
    height: 2px;
    background: #459be5;
    bottom: -10px;
    left: 0;
  }
  /*********** End ************/
</style>
<body>
<div class="container">
  <header class="flex">
    <div class="left-wrap">
      <div class="logo-block">
        <img src="https://www.educoder.net/images/educoder/headNavLogo.png?1526520218" class="logo">
      </div>
      <div class="menu-block full-height flex">
        <div class="menu-item"><span class="active">實(shí)踐課程</span></div>
        <div class="menu-item"><span>翻轉(zhuǎn)課堂</span></div>
        <div class="menu-item"><span>實(shí)訓(xùn)項(xiàng)目</span></div>
        <div class="menu-item"><span>在線競(jìng)賽<img class="hot"
                                              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAQCAYAAAAFzx/vAAACl0lEQVRIS62UP0gbURzHP09DUrHW1EqHuLhYBC0t1NOCg4M432IXhxZKDwShxUA7iuLmoLUEXHSRghk1OLgaaCrnn6FD6aFUEDoIYq5NxBBNXnkvl3hWi4N5y927e+/3+f2+vz9CQhCYAl4C96nSkoC4sJUGFoEPQsJH4F2VODeZmVVARQ/fdPI2/1W0XsSuAqr30qqrg85O2N0F1726V2ciEejqQp6fI1IppOsivG9+p5TRguOQcxxOgbzaK5kvAQ0DbBtME5lIgGEg/PupKUQ0CtksBIOQz8PQEDIQQKysXBFhf3yc3YmJSkQ1/wNK0wQfUO8PDhBbW8j5eRgehnAYsb6ObGzkuLWVQ+DUMHhm22ybJr/VfUBDfE8dYUVTLyK5tASOAy0tCMtCAUVzMywsIPv6EMmklic3Okr99DRf2trI7e1x1zDosW2+mSaZf4AVeNGfwzJQ5TCTgVAI0dGhJda5m5uD3l5yqRQ/gcDICI9iMba7u8ltblJvGDy1bb77gApUbg8d7XVADfAkVTnVEabTkEySjUZxZmY4AdqXl2nq72enoUHn6Y5h8MS2+WGa/Ekk/H2o5VVgBdRtob3wikYDfEDlwFkiQX51lbqBAdIbG9SGQoR7ejgYG+NwclIbVMDHto3jAf1VpFJQA2lRgFngrfZAyWZZEI+XchiJULAsTuJxfjkOLtA0OEhDezuyWCSzs8PJ2lqlCgORCA8ti6N4XLdDuTaKXh9K+KSKJlgsjbZXAsIXTQk54Ag4Bs6AWq/alHPlc0oZ9a6MquUzrr97/9wCLD6A975xV7og4Svw3Lu/BrwQkL3NpPHfvQ64D7QCn4HXohRc1dZ1QDWJYnqy+1umSshLQAn3gDcCpqtk/4qZv02gFT1dbcRiAAAAAElFTkSuQmCC"></span>
        </div>
        <div class="menu-item"><span>教學(xué)案例</span></div>
        <div class="menu-item"><span>交流問答</span></div>
      </div>
    </div>
    <div class="right-wrap">
      <div class="icon-list full-height flex">
        <div class="icon-item"><img src="https://www.educoder.net/api/attachments/411643" alt=""></div>
        <div class="icon-item"><img src="https://www.educoder.net/api/attachments/411644" alt=""></div>
        <div class="icon-item"><img src="https://www.educoder.net/api/attachments/411645" alt=""></div>
      </div>
      <img class="user" src="https://www.educoder.net/images/avatars/User/b?t=1569204859650" alt="">
    </div>
  </header>
</div>
</body>
</html>

到了這里，關(guān)于CSS 文本樣式入門教程：字體、顏色和大小的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

CSS 文本樣式 CSS 入門

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

CSS樣式前端HTML頁面常用CSS效果實(shí)現(xiàn)及其相關(guān)配置信息------前端入門基礎(chǔ)教程
!DOCTYPE html !-- 這是HTML的注釋 -- html lang=\\\"en\\\" id=\\\"myHtml\\\" ?? ?head ?? ??? ?!-- 這里不是設(shè)置了編碼,而是告訴瀏覽器,用什么編碼方式打開文件避免亂碼 -- ?? ??? ?meta charset=\\\"UTF-8\\\" ?? ??? ?meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\" ?? ??? ?titleHtmlAll/title ?? ??? ?
2024年02月05日
瀏覽(35)
CSS Day5-像素、顏色、字體樣式
5.1 像素 5.1.1 px 一般情況下瀏覽器默認(rèn)的最小像素是12px,即使你設(shè)置的像素小于12px，文字也不會(huì)變小 5.1.2 百分比% 根據(jù)父元素的大小來設(shè)置自己的大小好處：當(dāng)父元素大小發(fā)生變化時(shí)子元素也會(huì)跟著改變適配屏幕的大??；移動(dòng)端自適應(yīng)比較常用。 5.1.3 rem 根據(jù)根元素（html)去
2024年02月01日
瀏覽(91)
css樣式的補(bǔ)充：鼠標(biāo)懸停字體變大和改變顏色
鼠標(biāo)懸停字體變大和改變顏色需要用到 hover 動(dòng)態(tài)偽類選擇器可以使鼠標(biāo)滑過前面緊貼元素目標(biāo)1時(shí),觸發(fā)動(dòng)態(tài)效果. 在使用時(shí)只要確保hover前緊貼的元素是鼠標(biāo)滑過的目標(biāo),最后花括號(hào)前的元素是希望改變屬性的目標(biāo)即可. ? ? 沒放鼠標(biāo)之前：放了鼠標(biāo)之后： ? ?通過hover偽類選
2024年02月03日
瀏覽(100)
[前端系列第2彈]CSS入門教程：從零開始學(xué)習(xí)Web頁面的樣式和布局
在這篇文章中，我將介紹CSS的基本概念、語法、選擇器、屬性和值，以及如何使用它們來定義Web頁面的外觀和布局。還將給一些簡(jiǎn)單而實(shí)用的例子，可以跟著我一步一步地編寫自己的CSS樣式表。目錄一、什么是CSS 二、CSS的語法三、CSS的選擇器四、CSS的屬性和值（一）顏色
2024年02月13日
瀏覽(90)
css第八課：文本屬性（字體，顏色屬性）
這一節(jié)我們要講的是文本屬性：文本屬性就是：?css樣式里的屬性，對(duì)文本的修飾，比如顏色，大小，字體，下劃線... 下圖是文本的一些屬性： 1.font-size和font-family屬性我們先來演示一下前兩個(gè)屬性：字體大小和字體類型 ?結(jié)果： ?解釋：我們這里第一個(gè)p標(biāo)簽設(shè)置的css樣式
2024年02月06日
瀏覽(22)
HTML--CSS--字體、文本樣式
屬性作用 font-family 字體類型 font-size 字體大小 font-weight 字體粗細(xì) font-style 字體風(fēng)格 color 字體顏色用法：如下，定義 div元素內(nèi)的字體，默認(rèn)是宋體，要設(shè)定其他字體就用這個(gè)屬性進(jìn)行設(shè)定，關(guān)于各字體，我用VSCode寫代碼時(shí)有補(bǔ)全，就不一一列出了用法：字體粗細(xì)屬性：
2024年01月17日
瀏覽(114)
前端-CSS 字體和文本樣式
字體大小字體粗細(xì) 字體樣式字體系列文本縮進(jìn) 取值數(shù)字 + px 數(shù)字 + em(推薦：1em=當(dāng)前標(biāo)簽的 font-size 大小) 文本水平對(duì)齊方式內(nèi)容居中需要給父元素設(shè)置居中屬性 [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-2ENfm2r2-1688123416662)(https://note.youda
2024年02月11日
瀏覽(97)
CSS3中的字體和文本樣式
CSS3優(yōu)化了CSS 2.1的字體和文本屬性，同時(shí)新增了各種文字特效，使網(wǎng)頁文字更具表現(xiàn)力和感染力，豐富了網(wǎng)頁設(shè)計(jì)效果，如自定義字體類型、更多的色彩模式、文本陰影、生態(tài)生成內(nèi)容、各種特殊值、函數(shù)等。字體樣式包括類型、大小、顏色、粗細(xì)、下畫線、斜體、大小寫等
2024年02月06日
瀏覽(23)
css：如何通過不同的值，改變盒子的樣式和字體顏色通過computed而不是v-if
在使用uniapp編寫功能時(shí)，可以通過computed方法來實(shí)現(xiàn)根據(jù)num這個(gè)值也可以是后端傳過來的值只要是number類型都可以。不同取值來修改盒子的背景顏色和字體顏色。首先，在data中定義一個(gè)num來存儲(chǔ)當(dāng)前的值，然后在computed中創(chuàng)建一個(gè)樣式對(duì)象，并根據(jù)num的取值來設(shè)置相應(yīng)的背景
2024年02月08日
瀏覽(101)
echarts系列-帶圖教你調(diào)整左右位置x軸樣式網(wǎng)格虛線刻度居中雙軸Y軸滾動(dòng)上下移動(dòng)文字旋轉(zhuǎn)改分割線顏色部分字體改色折注混合，X軸的顏色，X軸字體顏色，調(diào)整柱子顏色，調(diào)整小圖標(biāo)圖例的大小和位置,鼠標(biāo)
本文已參與「新人創(chuàng)作禮」活動(dòng)，一起開啟掘金創(chuàng)作之路。看圖歡迎大家指出文章需要改正之處~ 學(xué)無止境，合作共贏歡迎路過的小哥哥小姐姐們提出更好的意見哇~~
2024年02月10日
瀏覽(31)