Getting Started in CSS (1) Original: Hotblood April 12, 2003 CSS is the abbreviation of Cascading Style Sheets. More people call it style sheet. As the name suggests, it is a tool for design webpage style. With the powerful features of CSS, the web page will change thousands of imagination.
See the two pictures above, you may think this is made with photoshop or other graphics processing software. However, the above example is completely written in CSS. In fact, CSS code is composed of some of the most basic statements. The structure of its basic statement is this: Select {Property: Attribute} Look, is it very simple, only three parts. The composite style declaration of a single selector should be separated by a semicolon: selector {attribute 1: Value 1; Property 2: Value 2} The following is a segment define the color and font size attribute of H1 and H2 elements:
Untitled Document </ Title> <style type = "text / css"> h1 {font-size: x-large; color: red} h2 {font-size: large; color: blue} </ stop> </ head > The above style sheet tells the browser to increase the primary title with increased, red fonts, with large, blue fonts to display the secondary title .. From the above example, we can see that the CSS statement is embedded in the HTML document. Therefore, the method of writing CSS and the method of writing HTML documents is the same. You can use any text editing tool to write. For example, Notepads under Windows and WTOM, special HTML text editing tools (FrontPage, etc.) can be used to edit CSS documents. As can be seen from the basic statement of CSS, the attribute is a very important part of the CSS. Skilled, the various properties of CSS will be a more mindful hand. l Font attribute This is the most basic property, you often use it. It mainly includes these properties:</p>
<p>EG <p style = "font-style: Oblique; font-weight: bold; font-size: 24pt; font-variant: small-caps"> HONGEN </ P> may ask: Defining a font how to be so long Code? In fact, it is still a "font" attribute in the font attribute to make simple definitions. Let's look at the following code: <p style = "font: italic small-caps bold 36pt, glitzycurl"> Leaf </ p> The effect of this code is like this (as shown below):</p>
<p>This code defines the font of "Leaf" as glitzycurl, and is a slope, small larger, bold, 36 word. This code is equivalent to: <p style = "font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 36pt; font-family: giltzycurl> Leaf </ p> No, it is much thin. But you need to pay attention to: If you use the <font> property directly defined directly, you must pay attention to the emission order of the attribute value. Its emission rules are in the order in which "Font-style", "Font-Variant", "Font-Weight", "Font-size", "font-family" is not defined, with the default value display. l Color and background properties You always don't want your page in the black and white world. Is it better if you add a color to the text defined by the <font> property? Let's talk about the color and background properties of CSS. Let's take a look at what attributes under the color and background under the CSS (as follows): We still give an example. For example, the "Leaf" font speaking in the previous section, we add color properties, add the following code in <style>: Color: RGB (204, 82, 28); Background-IMG: URL (SS01038.jpg); Background-repeat: no-repeat; margin-right: 15em Set the RGB value of the foreground color is (204, 82, 28), you can also directly define the English name of the color; set the address of the background pattern; set the background pattern does not repeat Display; another page is also set up margin properties. The font display effect of "leaf" after the addition of the code is like this (as shown below):</p>
<p>How is it, is it more beautiful than the light definition <font> property is more beautiful. Of course, you can also clear the background property (like definition font attribute), let's tell the writing format of your background property: Property: Background property value: <Background-color> || <Background-Image> || <Background -repeat> ||> || <background-position> That is, using the Background property can define all the properties of the background, including background colors, background patterns, and so on. Therefore, the code on the "Leaf" color properties can be written as this: "Background: URL (SS01038.jpg) no-review" is good, as for the function of color and background attributes, you still try it yourself. . (to be continued)</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-83243.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>)
</div><div></div></div></div><ul class="postlist list-unstyled">
</ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="83243" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved
</div><div class="col text-right">Processed:
<b>0.044</b>, SQL:
<b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script>
var debug = DEBUG = 0;
var url_rewrite_on = 1;
var url_path = './';
var forumarr = {"1":"Tech"};
var fid = 1;
var uid = 0;
var gid = 0;
xn.options.water_image_url = 'view/img/water-small.png';
</script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script>
var forum_url = 'list-1.html';
var safe_token = 'CDGOmxTFgK46PT_2FTZWcVXf9yaPXqqRp1bwUFMFubEl7WOw6HFWdZ3VT5LsayvKNDbR37mpkBKIRsmf9YfGa1yg_3D_3D';
var body = $('body');
body.on('submit', '#form', function() {
var jthis = $(this);
var jsubmit = jthis.find('#submit');
jthis.reset();
jsubmit.button('loading');
var postdata = jthis.serializeObject();
$.xpost(jthis.attr('action'), postdata, function(code, message) {
if(code == 0) {
location.reload();
} else {
$.alert(message);
jsubmit.button('reset');
}
});
return false;
});
function resize_image() {
var jmessagelist = $('div.message');
var first_width = jmessagelist.width();
jmessagelist.each(function() {
var jdiv = $(this);
var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width();
var jmessage_width = Math.min(jdiv.width(), maxwidth);
jdiv.find('img, embed, iframe, video').each(function() {
var jimg = $(this);
var img_width = this.org_width;
var img_height = this.org_height;
if(!img_width) {
var img_width = jimg.attr('width');
var img_height = jimg.attr('height');
this.org_width = img_width;
this.org_height = img_height;
}
if(img_width > jmessage_width) {
if(this.tagName == 'IMG') {
jimg.width(jmessage_width);
jimg.css('height', 'auto');
jimg.css('cursor', 'pointer');
jimg.on('click', function() {
});
} else {
jimg.width(jmessage_width);
var height = (img_height / img_width) * jimg.width();
jimg.height(height);
}
}
});
});
}
function resize_table() {
$('div.message').each(function() {
var jdiv = $(this);
jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>');
});
}
$(function() {
resize_image();
resize_table();
$(window).on('resize', resize_image);
});
var jmessage = $('#message');
jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); });
jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); });
$('#nav li[data-active="fid-1"]').addClass('active');
</script>
