css definitive guide

When done, the effect is this:The three pictures from left to right are 1.png,3.png,2.png.1 DOCTYPE HTML>2 HTML>3 Head>4 title>MyTesttitle>5 Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" />6 style>7 Div{width:1000px;margin:0px Auto;}8 Div ul{9 Line-height:50px;Ten text-align:Center; One width:1000px; A } - Div ul Li{ - width:170px; the Display:Block; - float: Left; - background:URL (2.png) no-repeat; - Padding-right:30px; + background-p

There are three types of styles in CSS: creators, readers, and user agents, different sources can affect how styles are stackedFirst of all, the creator (author ' S+style) style should be the most familiar to us, if you are a front-end developer, then the styles you write are called the authoring style.Then is the user agent style (agent ' S+style), the user agent is what we usually say the browser (IE, Firefox, etc.), these browsers will provide some

This chapter focuses on the values of some property declarations:The values in CSS are mainly numbers, percentages, colors,1. Color:RGB (100%,100%,100%) or RGB (255,255,255) or #FF0000Web security color: refers to a value that is a multiple of 20%,51,0x33.2. Length unit: unit with in cm mm PT pcWhere: 1in = 2.54cm 1cm = 0.394in 1in = 72pt 1pc = 12ptRelative length unit: em,ex,px3.URL4. Keyword: none inheritIn addition, there are some values that are u

prohibit floating or positioning: Before and: After content, and prohibit the use of List style properties and table properties. There are also 2 restrictions: 1. If the body of these two selectors is a block-level element, the display property accepts only values of none, inline, block, and marker other values as block. 2, if the body of the two selector is an inline element, the attribute display can only accept none and inline. Other values are processed as inline.2. The generated content is

other style, including the creator style with the!important logo. Both the author style and the reader style are stronger than the default styles for user agents. Reader's!important style Creator's!important style The creator's Normal style Normal style of the reader Style of user agent declaration Sorts all declarations applied to a given element by particularity. Elements with higher specificity are more weighted than those with lower specificity.

Topic ReviewsThe triangle icon in the Web page design is very common, belongs to the basic common sense question, as long as in the practice has done this function can answer, can put the thought that you have done to describe can, the difficulty degree of the topic is simple650) this.width=650; "Src=" https://s1.51cto.com/wyfs02/M02/95/8C/wKioL1kWiraAwN4sAABtAP0iiMk456.png-wh_500x0-wm_ 3-wmp_4-s_96509191.png "style=" Float:none; "title=" QQ pictures (18) 1.20170422100210.png "alt=" Wkiol1kwiraa

Pull the drawing under the Guide line of CSS

Topic reviewsThe triangle icon in the Web page design is very common, belongs to the basic common sense question, as long as in the practice has done this function can answer, can put the thought that you have done to describe can, the difficulty degree of the topic is simple650) this.width=650; "Src=" https://s3.51cto.com/wyfs02/M00/95/B9/wKiom1kZKLTBRoSBAABtAP0iiMk207.png-wh_500x0-wm_ 3-wmp_4-s_1391844784.png "style=" Float:none; "title=" QQ pictures (18) 1.20170422100210.png "alt=" Wkiom1kzkl

Topic ReviewsThe triangle icon in the Web page design is very common, belongs to the basic common sense question, as long as in the practice has done this function can answer, can put the thought that you have done to describe can, the difficulty degree of the topic is simple650) this.width=650; "Src=" https://s1.51cto.com/wyfs02/M02/95/B4/wKiom1kZDxiRWtVgAABtAP0iiMk259.png-wh_500x0-wm_ 3-wmp_4-s_2342213239.png "style=" Float:none; "title=" QQ pictures (18) 1.20170422100210.png "alt=" Wkiom1kzdx

Reading Notes CSS authoritative guide, The main purpose of this book: Since I learned CSS, I have mastered its usage methods and skills, but I am not clear about its underlying principles and implementations. I want to learn more systematically and deeply about its nature, from skilled use to true understanding of the front-end BASIC language. Chapter 4

1. Introduction of PluginsvarGulp = require ('Gulp'), //uglify = require (' gulp-uglify '),Concat = require ('Gulp-concat'), Minifycss= Require ('Gulp-minify-css'), Rev= Require ('Gulp-rev'), Revcollector= Require ('Gulp-rev-collector');Console inputNPM Install gulp gulp-concat gulp-minify-css gulp-rev gulp-rev-collector--save-dev2. Write code in Gulpfile.jsGulp.task ('concat', function () {GULP.SRC ('Xing

Css authoritative guide-Chapter 2 css and documentation 1. element: replacement element (img input), non-replacement element (most span ). 2, link: rel (Representative relation: stylesheet, candidate style sheet: alternate stylesheet); type (text/css); media :( all (all representations of media, screen, print ), title

This article mainly introduces how JS + CSS achieves sliding door effects with small triangle guidance. it can implement sliding door functions with arrow prompting effects, and involves related techniques related to JavaScript dynamic page element styles, for more information about JS + CSS, see the example below. Share it with you for your reference. The details are as follows: This is a JS +

{Position:absolute;top:50%;height:100px;margin: -50px;}2.2 Do not know the height of the elementWe can still put this element to the parent element in the first half of the place, and then nudge a little bit, as follows:. parent{position:relative;}.child{Position:absolute;top:50%;Transform:translatey ( -50%);}2.3 Is it possible to use CSS3 's Flexbox? Yes, and very simple: parent{Display:flex;Flex-direction:column;Justify-content:center;}3. Horizontal + Vertical Center1. The element has a fixed

-left-radius:6px;-webkit-border-top-left-radius:6px;-webkit-border-top-right-radius:6px; border-bottom-left-radius:6px;border-top-left-radius:6px;border-top-right-radius:6px;Uh, is that what you've been looking at? This is only to realize that the upper-left corner is not rounded, the other three corners are rounded corners of the case. So for Border-radius, flying is strongly recommended to use abbreviations:-moz-border-radius:0 6PX 6px;-webkit-border-radius:0 6PX 6px;border-radius:0 6PX 6px;Ex

1th chapter CSS and documentation1, element: replace Element (img input), non-replacement element (most spans).2,link:rel (representing relationship: stylesheet, candidate style sheet: alternate stylesheet); type (text/css); Media: (All (all representations of media, Screen,print), Title (mates with candidates).3, @import URL (sheet1.css) needs to be used within

As a result, the well-structured code optimizes its maintainability to a great extent. The following is a list of four techniques for improving the maintainability of CSS files as a guide to Web front-end development with a good CSS style organization habit. First, CSS style file decomposition For small projects, div

-left-radius:6px;-webkit-border-top-left-radius:6px;-webkit-border-top-right-radius:6px; border-bottom-left-radius:6px;border-top-left-radius:6px;border-top-right-radius:6px;Uh, is that what you've been looking at? This is only to realize that the upper-left corner is not rounded, the other three corners are rounded corners of the case. So for Border-radius, flying is strongly recommended to use abbreviations:-moz-border-radius:0 6PX 6px;-webkit-border-radius:0 6PX 6px;border-radius:0 6PX 6px;Th

First chapter CSS and documentation1. Replace elements with non-replacement elements, replace elements such as IMG input, and most HTML elements are non-replacement elements.2. Block-level elements and inline elements?, block-level elements automatically fill the content box of the parent element, the table is consistent with other block-level elements, and the only difference is that the table generates a marker, which is a small black dot. Block-lev

Therefore, the good structure of the code to a large extent to optimize its maintainability. The following is a list of four tips for improving the maintainability of CSS files as a guide for Web front-end development with a good CSS style organization. one, CSS style file decomposition For small projects, before wri