Вы находитесь на странице: 1из 5

CSS Core Concepts TARGETING PAGE CONTENT

– Structuring HTML correctly

– Tag is appropriate for content

– Be consistent how you structure content through out site

– Simplify code, avoid non-semantic markup

– Element Selectors

– are global in nature they are going to occur in every single instance of that element on that page

– Best for applying sort of initial baseline formatting that can then be overwritten as needed with more specific selectors.

– Class Selectors

– target any element on the page that has the same class

– use classes that describe the content not the css

– How to best utilize them?

– Id Selectors

target any element on the page with a specific id attribute per page

A

class and ID selector conflict with each other, the ID selector's styling will be used in favor of the

class because it's more specific.

– Using classes and IDs

use them to describe and identify specific content

it

is best to have semantic meaning than presentation meaning

Some use ID to allow the use of JavaScript

Use ID if content is unique and does it need to be identified

ie. pageHeader, pageFooter

Use class if content is not unique but needs to be identified

– i.e. names

– Element-Specific selectors

– target very specific elements

– limit its use because it is the best selector for the job

– Universal selector

– Means every element on the page

– Applies to every single element on the page, so all paragraphs, headings, unordered lists, sections, aside, articles.

– Grouping selectors

– When several dierent elements on the page require the exact same styling

– Descendants Selectors (h1 p)

– We can more precisely target content based on the relationship between nested tags and their parents.

– Use the most e ective and e cient descendant selector possible

– Child Selectors (>)

– Apply only the elements that are direct children of the parent

– Adjacent Selectors (+)

– style in an element based on which element comes before in the document, providing that both of those elements are inside the same parent.

– Attribute Selector

– Target elements based on the elements' attributes and the values of those attributes.

– Target presence of attribute: a[title]

– Target specific value of attribute: a[title="visit lynda.com"]

– Target attribute based on pattern: a[class~="red"]

– looking for white space separated list to find the given value

– Target attribute based on pattern if it begins with: a[href^="http://"]

– Target attribute based on pattern if it ends with: a[href$="pdf"]

– Target attribute based on pattern look for any literal string that has the value given inside of it :

a[title*="visit"]

– Target specific pattern: a[href*="_docs"]

– Pseudo-class selectors

– target elements or instances that lie outside that lie outside of the DOM or are too specific for simple selectors to target

– :hover (pseudo-class selector)

– a:hover (targeted pseudo-class selector)

– ul a:hover (descendant selector with a pseudo-class selector)

– Dynamic Pseudo-class Selectors

– Target elements based on something other than attributes, content, or element type. Usually refers to something that can change over time, or that is based on user interaction.

– UI Element State Pseudo-class Selectors

– Target specific user interface elements in regards to whether or not they are currently enabled.

– Structural Pseudo-class Selectors

– Target elements based on specialized information within the DOM that simple selectors cannot

target. This can be pattern-matching child-to-parent relationships, or other structural information.

– Other Pseudo-class Selectors

– Other pseudo-class selectors exist that can't really be grouped into any one category. These

selectors give you even more specific targeting capabilities based on things like language or URL targeting.

– Dynamic Pseudo-Class Selectors

– links, link states and target pseudo-class selectors

– <a> should be in the order l v h a

– a:link, a:visited, a:hover, a:active

– a:(id) - matching id value to specific web page

– Structural Pseudo-Class Selectors

– span:first-child - find every span in the document and if it is the first child of its parent element, go ahead and give it this styling

– h2:first-of-type: find all h2s and see when they are inside of a parent element. When they are the first h2 within the parent element, style them.

– p:only-child: find a paragraph and that paragraph is the only child inside the parent, go ahead and

give it that styling

– p:only-of-type: when the paragraph is the only paragraph inside of a parent element style it.

– Nth-child selectors

– Target elements based on patterns that describe which elements within a parent that you should target.

– Simple nth-child

– li:nth-child(2): second element

– li:nth-child(2n): every second element

– li:nth-child(odd): every odd element

– li:nth-child(even): every even element

– li:nth-child(2n+1): every second element beginning with 1 (oset)

– li:nth-child(-2n+8): start at 8 and select every second one going back

– li:nth-child(5n-1): start at -1 and select every fifth element

– Complex nth-child

– li:nth-child(1n+6): start at 6 and select every one after that

– li:nth-child(1n+6):nth-last-child(1n+6):

– start at 6 element and select every one after that

– start at 6 element from the end of the list and every element going up: these two are meeting

– li:nth-child(-1n+5), li:nth-last-child(-1n+5)

– start at 5 element and select every one going back

– start at 5 element from the end of the list and every element going back

– Pseudo-element selectors

– p::first-line:

– p::first-letter:

– a::after { content: " (outside link)";}

– a::after { content: "[" attar(href) "]"; } RESOLVING CONFLICTS

– What happens when styles conflict?

– If the properties conflict, the properties of one rule will replace the other.

– If they don't conflict with one another, the properties are added and the rules are cumulative, leaving you with a mixture of the two rules.

– Understanding the cascade

– The last rule applied wins.

– NOTE: inline have other things to take into account: specificity, inheritance. But inline styles almost always win in the event of a conflict.

– Using inheritance

– If you apply the property to a parent element, all the elements inside of it will have that property applied to it as well.

– If a child element has a style that diers or conflicts with the parent styles, the child styles always wins.

– As sites become more complex, inheritance becomes more di cult to track.

– Keep styles organized will help you avoid conflicts caused by inheritance.

– Placing your most basic, default styles on top-level elements is an ecient way to style elements site- wide.

– Remember that styles are cumulative; you must account for formatting inherited through parent elements.

– Selector specificity

– how specific is it?

– Element: specificity value of 1

– ID: specificity value of 100

– Classes: specificity value of 10

– NOTE: Inheritance takes precedence over selector specificity

– The !Important declaration

– WMD of CSS

– Important declaration wins

– Only another more specific important declaration can win over an important declaration

– Reducing conflicts through planning General Guidelines

– Avoid using local styles when possible.

– They add a sometimes unwarranted extra layer of complexity to a site.

– Updating or modifying styles can become a chore.

– Local styles are easy to miss, especially in a team environment

– Do not use inline styles except to very specific circumstances.

– They are almost impossible to detect and maintain.

Develop a Strategy for Specificity

– Don't mix class and ID selectors without having a plan that guides when they are to be used.

– Sections of ID selectors can be hard to overwrite later if not accounted for.

– If you find yourself writing descendent selectors with three or more selectors, consider revising the strategy. Use Inheritance to your Advantage

– If you are familiar with your page structure, you should be able to identify global formatting across your site.

– Those formatting needs can then be written as global styles on parent elements, and inherited by the rest of the site.

– This results in fewer rules to write and easier styles to maintain. Think About How Styles Relate to One Another

– New designers often make the mistake of styling each element individually, as it's encountered.

– This can lead to bloated style sheets and hard to maintain styles.

– Thinking of styles as related formatting allows you to plan and write organized style sheets. BASIC TEXT FORMATTING

– Setting a font family (using a font-stack)

– font-family: first_value, second_value, third_value;

– Using @font-face (using web fonts)

– /* @font-face rule declarations */

– Normal, bold, italic, bold italic

– Setting font size

– Absolute: pixels

– Reserved words: xx-small small medium large xx-large

– Relative: ems

– Writing font shorthand notation

– font: font-weight font-style font-variant font-size/line-height font-stack;

– font:font-size font-stack; (minimal: font-weight:font-style:font-variant pass implicit)

– Adjusting paragraph line height

– pass line height as inherited value use multiples not ems

Styling Container Elements

– Understanding the box model:

– width (content-width):

– height(content-height):

– When you don't have an explicit width set for the element, you're going to lose some of that width, or if you reduce those amounts you're going to gain some width.

– example

– body width is 600px

– padding: 10px

div

– border: 1px solid color

div

– margin: 10px

div

– 20+20 + 2 + 558(content width)

– example

set div width to 570px will reduce margins

– example

set div width to 600px will extend the div will overflow their parent container and overflow can be

hidden using overflow:hidden

– Controlling element spacing

– margin: top right bottom left

– Vertical don't behave the same as horizontal

– Vertical margin collapse: when two margins touch each other, they collapse, if their values match, you get what one of the values is, if their values are mismatched you get the larger to two values

Essentially when you have elements that touch each other or even nested elements, if there's nothing to keep the vertical margins from touching each other, meaning there's no border there, there's no padding there, there is just

content, then all those vertical margins collapse; outer element's vertical margins collapse and the inner element's vertical margins collapse.

margin: 0 auto;

Controlling interior spacing

padding: top right bottom left

Content width and content height, the width and height properties are added to padding.

padding: use percentage to give you fluid and flexible padding regions.

Adding borders

border: 1px solid black

Defining element size

– – Example1 body {width:600px;}

div1 { width:300px; padding:25px;}

div2{ width:300px; padding:25px;}

To keep content away from the edge of an element is to use padding

Won't work adds up to 700px;

Example 2: fix problem from Example 1

body {width:600px;}

div1 { width:250px; padding:25px;}

div2{ width:250px; padding:25px;}

Creating rounded corners

border-radius: 25px; (25px: top, right, bottom, left)

border-radius: 25px 10px; (25px: top-left, bottom-right and 25px: top-right,bottom-left)

border-radius: 25px 10px 5px; (25px: top-left, 10px: bottom-left, top-right, 5px: bottom-right);

border-radius: 25px 10px 5px 0; (25px:top-left, top-right, bottom-left, bottom-right)

Using background images

background-image:url(_images/tweet_90.png);

relative to the css file not the page you are using it in

we have control on image tiling

background-repeat: no-repeat;

Controlling images positioning

background-position: left top; // line top left corner of image to container

background-position: horizontal-value vertical-value;

background-position: top; // center is assumed

background-attachment: fixed; // fix the background image relative to the viewport not the containing element

Using multiple backgrounds

background-image:url(_images/featured.png),url(_images/sm_nyc_banner.jpg);

last image will be at the bottom of the layer

top image will be at the top of the layer

background-repeat: no-repeat

background-position: 0 25px, led top;

Background shorthand notation

background: #666 url(_images/sm_nyc_banner.jpg) no-repeat left top;

background:url(_images/featured.png) no-repeat 0 25px,url(_images/sm_philly_banner.jpg) no-repeat left top, #666;

background: #600; WORKING WITH COLOR

HSL:

Hue: red at 0 and 360, green at 120 and blue at 240

Saturation: amount of color, how much color a particular shade has

Lightness: how bright or dark the color is

Styling drop shadows

box-shadow: hr_length vt_length blur_radius spread color

text-shadow: x_offset y_offset blur_radius color

CSS Gradients

background: #f7f0b7; //default color for old non supported browser

background: -moz-background: linear-gradient(top, #f7f0b7 0%, #b57c12 100%);

background: -webkit-background: linear-gradient(top, #f7f0b7 0%, #b57c12 100%);

background: linear-gradient(top, #f7f0b7 0%, #b57c12 100%);

Оценить