css CSS - 需要分类更多的SNIPPETS
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css CSS - 需要分类更多的SNIPPETS相关的知识，希望对你有一定的参考价值。
#####################################################
# FONT STYLE
# Each pc has default styles installed to it
# Css also has default styles installed to it
# More styles can be loaded
# Classic styles: (Default)
# 1, serif
# 2. sans-serif
# 3. cursive
# 4. verdana
# 5. courier
# 6. garamond
h1 {
font-family: serif
}
h2 {
font-family: sans-serif
}
h3 {
font-family: cursive
}
# In case we want to try to apply any style, if it exists, we can declared
# them in order;
# if it doesnt find "Times" it will use "serif"
/*Add your CSS below!*/
h1 {
font-family: Times, serif
}
h2 {
font-family: Verdana, sans-serif
}
h3 {
font-family: Vivaldi, cursive
}
# or
h1 {
font-family: Verdana, sans-serif, serif;
color: #576D94;
}
p {
font-size: 18px;
color: #4A4943;
font-family: Garamond, serif;
}
#a1 {
background-color: blue;
}
#a2 {
background-color: yellow;
}
#a3 {
background-color: red;
}#################################################
# FONT SIZING
# EITHER USE px or em
# px : Specific number of cpitures
# em : relative, 1 em = default font screen size
# we style with 1 em, 0.5em, 2em etc
<!DOCTYPE html>
<html>
<head>
<title>Result</title>
</head>
<body>
<p style="font-size: 1em">One em!</p>
<p style="font-size: 0.5em">Half an em!</p>
<p style="font-size: 2em">TWO EM!</p>
</body>
</html>########################################
CSS INTRO
Index.html :
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Fancy Fonts</title>
</head>
<body>
<p>I'm a paragraph written in red font, but one of my words is <span>blue</span>!</p>
</body>
</html>
stylesheet.css
p {
color: red;
}
###########
##############################################
<!-- Sample CSS uses: -->
<!-- Make all h3 headings red : -->
h3 {
color: red;
}
<!-- Make all paragraph tags have font courier -->
p {
font-family: Courier;
}
<!-- Make span assign a bg color -->
span {
background-color: yellow;
}
<!-- Make all h2 headers of a certain font and color (2 css elements) -->
h2 {
font-family: Verdana;
color: blue;
}
<!-- Assign colors or font color or bg color with hex value -->
h1 {
color: #8B1C62;
}
span {
/*Write your CSS here!*/
color:blue;
}#######################################################3
# CSS EXAMPLE
# We set tags, and assign attribute to tags
# Some tags will have #, those are custom div tags declared in html with <div name="name">
# All the other tags, ie body, h2, and so on, are styling default elements, table rows and so on.
body {
background-color: #b7d1c4
}
h2 {
font-family: Verdana;
font-weight: bold;
text-align: center;
padding-top: 25px;
padding-bottom: 25px;
color: #acd1b2;
}
img {
height: 170px;
width: 170px;
box-shadow: rgba(0,0,0,0.2) 10px 10px;
}
#navbar {
position: fixed;
top:10px;
left:50%;
margin-left:-254px;
}
#header {
position: relative;
top: -10px;
background-color: #3c4543;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
ul{
list-style-type: none;
position: fixed;
margin: -10px;
}
li {
display: inline;
border: 2px solid #000000;
font-family: Futura, Tahoma, sans-serif;
color: #ffffff;
padding: 5px;
border-radius: 5px 5px;
background-color: #cc0323
}
#left{
width: 45%;
float: left;
}
p {
font-family: Tahoma;
font-size: 1em;
}
#right{
width: 45%;
float: right;
}
table {
border: #000000 1px solid;
background-color: #acd1b2;
float: right;
margin-right: 10px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}
td {
height: 75px;
width: 75px;
}
td img {
height: 75px;
width: 75px;
box-shadow: none;
}
th {
font-family: Verdana;
font-size: 1em;
font-weight: normal;
color: #3c4543
}
#bottom_left{
border-bottom-left-radius: 15px;
}
#bottom_right{
border-bottom-right-radius: 15px;
}
#footer{
clear: both;
position: relative;
bottom: -20px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
height: 75px;
background-color: #3c4543;
}
#button{
border: 2px solid #000000;
float:left;
position: relative;
left: 229px;
bottom: -20px;
border-radius: 5px;
background-color: #cc0323;
height: 30px;
width: 150px;
}
#button p{
position: relative;
bottom: 10px;
font-size: 0.8em;
color: #acd1b2;
text-align: center;
}
.bold{
font-family: tahoma;
font-weight: bold;
font-size: 1.2em;
font-variant: small-caps;
color: #ffffff;
}################################################################################
# ALBUM WITH CLICKABLE IMAGES
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<title>My Photo Page</title>
</head>
<body>
<table>
<thead>
<tr>
<th colspan="3">ALALALALA</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="http://codecademy.com"><img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" /></a></td>
<td><a href="http://codecademy.com"><img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" /></a></td>
<td><a href="http://codecademy.com"><img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" /></a></td>
</tr>
<tr>
<td><a href="http://codecademy.com"><img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" /></a></td>
<td><a href="http://codecademy.com"><img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" /></a></td>
<td><a href="http://codecademy.com"><img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" /></a></td>
</tr>
<tr>
<td><a href="http://codecademy.com"><img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" /></a></td>
<td><a href="http://codecademy.com"><img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" /></a></td>
<td><a href="http://codecademy.com"><img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" /></a></td>
</tr>
</tbody>
</table>
</body>
</html>
img {
width:100px;
height:100px;
}
table, td {
border: 10px #70b8ff dashed;
}###############################################################################3
# ALBUM WITH IMAGES READY CODE
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<title>My Photo Page</title>
</head>
<body>
<table>
<thead>
<tr>
<th colspan="3">ALALALALA</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" /></td>
<td><img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" /></td>
<td><img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" /></td>
</tr>
<tr>
<td><img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" /></td>
<td><img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" /></td>
<td><img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" /></td>
</tr>
<tr>
<td><img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" /></td>
<td><img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" /></td>
<td><img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" /></td>
</tr>
</tbody>
</table>
</body>
</html>
img {
width:100px;
height:100px;
}
table, td {
border: 10px #70b8ff dashed;
}
##############################################################################
# TABLE WITH 3 ROWS/COLUMSN AND CSS
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<title>My Photo Page</title>
</head>
<body>
<table>
<thead></thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
#CSS:
img {
width:100px;
height:100px;
}
table, td {
border: 1px #70b8ff dashed;
}
</body>
</html>#############################################################################
# HTML AND CSS WORKING TOGETHER
# HTML CONTAINS REFERENCE TO CSS FILE in <link type...>
<!DOCTYPE html>
<html>
<head>
<title>Ye Olde Fancye Booke</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<h3>Ye Olde Storye</h3>
<p><span>A</span> long time ago there was an intrepid young student who wanted to learn CSS...</p>
# CSS CONTAINS STYLE SHEETS FOR
p {
font-family:Garamond;
font-size:16px;
}
h3 {
font-family:cursive;
color:#36648b;
text-align:center;
}
span {
color:#cc0000;
font-size:24px;
}以上是关于css CSS - 需要分类更多的SNIPPETS的主要内容，如果未能解决你的问题，请参考以下文章
css Text Wort Trennung Hyphen自动换行#snippet #css
css 此css-snippet为IE8提供了背景大小的功能
CSS @ font-face TextMate Snippet