- Web Developer's Reference Guide
- Table of Contents
- Web Developer's Reference Guide
- Credits
- About the Authors
- About the Reviewers
- www.PacktPub.com
- Preface
- 1. HTML Elements
- DOCTYPE
- html
- Document metadata
- Semantic content sections
- Content sections
- Inline elements
- Embedded content
- Tables
- Forms
- Drawing elements
- 2. HTML Attributes
- Global attributes
- Miscellaneous
- accept
- accept-charset
- action
- alt
- async
- autocomplete
- autofocus
- autoplay
- autosave
- cite
- cols
- colspan
- datetime
- disabled
- download
- content
- controls
- for
- form
- formaction
- height
- href
- hreflang
- label
- list
- loop
- max
- maxlength
- media
- method
- min
- multiple
- name
- novalidate
- pattern
- placeholder
- poster
- readonly
- rel
- required
- reversed
- rows
- rowspan
- scope
- selected
- size
- src
- start
- step
- type
- value
- width
- wrap
- 3. CSS Concepts and Applications
- Basic selectors
- Combinators
- Pseudo-classes
- Validation
- Pseudo-elements
- Generated content
- 4. CSS Properties – Part 1
- Animation
- Background
- Box model
- Border radius
- Unit
- Flexible box (flexbox)
- Summary
- 5. CSS Properties – Part 2
- Fonts
- Transform
- Positioning
- Text
- Tables
- Words and paragraphs
- Paging
- 6. CSS Properties – Part 3
- Page box
- List
- Counter
- Drop shadows
- Display and visibility
- Masking and clipping
- Image rendering and orientation
- User interface
- 3-Dimensional
- Summary
- 7. CSS Functions
- Filter
- brightness()
- contrast()
- grayscale()
- invert()
- hue-rotate()
- blur()
- saturate()
- sepia()
- Transforms
- matrix()
- matrix3d()
- rotate()
- rotate3d()
- rotateX()
- rotateY()
- rotateZ()
- scale()
- scale3d()
- scaleX()
- scaleY()
- scaleZ()
- skew()
- skewX()
- skewY()
- steps()
- translate()
- translate3d()
- translateX()
- translateY()
- translateZ()
- Colors
- Gradients
- Values
- Miscellaneous
- At-rules
- Global CSS keyword values
- Summary
- Filter
- 8. JavaScript Implementations, Syntax Basics, and Variable Types
- History of JavaScript
- JavaScript implementations
- The language syntax
- The character set
- Data type
- Variable, scope, and memory
- 9. JavaScript Expressions, Operators, Statements, and Arrays
- Expressions
- Operators
- Overview
- Arithmetic operators
- Logical operators
- Assignment operators
- Exponentiation assignment (**=)
- Relational operators
- Statements
- Arrays
- Array types
- Array type object
- Creating arrays
- Reading and writing array elements
- Multidimensional arrays in JavaScript
- Properties in an array
- Array methods
- ECMA5 Array methods
- array.prototype.map()
- array.prototype.filter()
- array.prototype.reduce()
- array.prototype.forEach()
- array.prototype.indexOf()
- array.prototype.lastIndexOf()
- array.prototype.every()
- array.prototype.some()
- array.prototype.reduceRight()
- Returns
- Parameters
- Description
- 10. JavaScript Object-Oriented Programming
- Polymorphism
- Objects
- Creating objects
- Design patterns
- Property getter and setter
- Deleting properties
- Testing properties
- Enumerating properties
- Property attributes
- Serializing objects
- Objects methods
- Functions and methods
- Classes and modules
- Inheritance
- Built-in objects
- Global objects
- Date object
- Math object
- The RegExp object
- String object
- Array objects
- .Pop()
- .Push()
- .ToString()
- .ValueOf()
- .Join()
- .Splice()
- .sort()
- .reverse()
- .slice()
- .concat()
- Parameters
- Returns
- Description
- 11. Extending JavaScript and ECMAScript 6
- Compatibility and goals
- JavaScript subset and extensions
- Scoped variables and constants
- Shorthand functions
- Multiple catch clauses
- E4X – ECMAScript for XML
- ECMAScript 6 features
- Arrow functions
- Classes
- Enhanced object literals
- Template strings
- Destructuring assignment
- Extended parameter handling
- Bindings
- Iterators and the for...of operator
- Generators
- Better Unicode support
- Modules
- Module loaders
- Collections
- Proxies
- Symbols
- Subclassable built-ins
- Promises
- Core math library APIs
- Binary and octal literals
- Reflect API
- Reflect.get(target, prop, [receiver])
- Reflect.set(target, prop, value, [receiver])
- Reflect.has(target, prop)
- Reflect.apply(target, receiver, args)
- Reflect.construct(target, args)
- Reflect.getOwnPropertyDescriptor(target, prop)
- Reflect.defineProperty(target, prop, desc)
- Reflect.getPrototypeOf(target)
- Reflect.setPrototypeOf(target, newProto)
- Reflect.deleteProperty(target, prop)
- Reflect.enumerate(target)
- Reflect.preventExtensions(target)
- Reflect.isExtensible(target)
- Reflect.ownKeys(target)
- Tail calls
- 12. Server-side JavaScript – NodeJS
- File and process management
- Utilities
- Events
- Crypto
- Buffer
- Console
- npm (Node Package Manager)
- Stream
CSS lists are one of the most versatile elements of web design. Aside from being used for making, well, lists, they are also used for navigation, layouts, slideshows, carousels, and so on.
Let's see some of their properties.
The list-style CSS property is shorthand for the list-style-type, list-style-image, and list-style-position properties. These properties are actually the values that the list-style CSS property supports. We'll see all these properties next.
The list-style property supports one, two, or three values, in any order. If a value isn't declared, it will use its default value.
CSS:
/*Default values*/
ul { list-style: disc outside none; }
/*One value, the other two are default*/
ul { list-style: circle; }
/*Two values, the other one is defaults*/
ul { list-style: lower-roman inside; }
/*Three values*/
ul { list-style: decimal outside url(../images/list-bullet.png); }The
list-style-type CSS property defines the type of graphic or marker (also called bullet) the list will use. The color of the marker is determined by the color of the text of the element it's applied to.
The list-style-type property supports many values, but we'll list 15 of the most commonly used ones: armenian, circle, decimal, decimal-leading-zero, disc, georgian, lower-alpha, lower-greek, lower-latin, lower-roman, none, square, upper-alpha, upper-latin, and upper-roman.
Here's a screenshot with all values except the none value:
CSS:
/*Style: 01, 02, 03...*/
ul { list-style-type: decimal-leading-zero; }
/*Style: α, β, γ...*/
ul { list-style-type: lower-greek; }
/*Style: A, B, C...*/
ul { list-style-type: upper-latin; }The
list-style-position CSS property defines the location of the marker.
The list-style-position property supports two keyword values: inside and outside.
When the inside value is applied, the marker will appear inside the text. If there's a line that wraps, the marker will be flushed to the left and not "sticking out" like in traditional lists.
The
list-style-image CSS property allows us to replace the default markers with a custom image.
The list-style-image property supports one keyword value and one function: none and url().
none: No image is used to replace the markerurl(): It's used to define the path to the image that will replace the marker
CSS:
ul {
list-style-image: url(../images/list-bullet.png);
}Here's a demo in CodePen with all HTML lists: http://tiny.cc/html-lists
-
No Comment