About Cascading Style Sheets CSS

TableofContents

1.CascadingstylesheetCSSoutreach

1.1LinkXMLdocuments

?edit

2.Selector

2.1Relationshipselector

2.1.1Nearbysiblingselector

2.2Attributeselector

2.3Pseudo-classselector

2.4Descendantselectors

2.5Commonlyusedselectors

2.5.1TagSelector

2.5.2ClassSelector

2.5.3IDselector

3.CommonCSSproperties

3.1Textattributes

3.2Colorattributes(foregroundcolor)

3.3Backgroundproperties

3.4Borderproperties

4.Commonlayoutattributes

4.1Floating

4.2Positioning

4.1.1Positioningmode

4.2.2.Edgeoffset

5.Commonlayoutattributes

5.1overflowattribute

5.2z-indexattribute

1.CascadingstylesheetCSSoutreach 1.1LinkXMLdocument

ThereareseveralwaystolinkCSSexternalXMLdocuments:inline,embedded,andexternallink.Themostcommonlyusedistheexternallinktype(i.e.,link-intype),whichputsallstylesinoneormorefileswitha.cssextension.Intheexternalstylesheet,linkthexmlwithspecialstatements,forexample:

<?xmlversion="1.0"encoding="GB2312"?>
<?xml-stylesheettype="text/css"href="product.css"?>
<product>
<description>thisisatoyforchildaged4andabove</description>
<price>66.6</price>
</product>
description{
font-size:30px;
font-style:italic;
}
2.Selector 2.1RelationshipSelector

Relationshipselectorsmainlyincludechildelementselectorsandsiblingselectors.

Thechildelementselectorismainlyusedtoselectthefirst-levelchildelementsofanelement,connectedbythe”>”symbol,forexample:A>B.

Therearetwotypesofsiblingselectors:adjacentsiblingselectorsandordinarysiblingselectors.

2.1.1Nearbysiblingselector

Thesiblingselector(+)isusedtoselectthefirstsiblingelementafterthespecifiedelement.Itmustbeimmediatelyfollowingthesiblingelementofthespecifiedelement,andonlyoneelementcanbeselected.

A+B{
color:red;
}

2.1.2Commonsiblingselector

Theordinarysiblingselector(~)isusedtoselectalladjacentsiblingelementsbehindanelement(itdoesnotneedtobeimmediatelyadjacent).Itssyntaxformatis”element1~element2″,whereelement1isthefirstelement,element2isthesecondelement,andallsubsequentelement2elementsaresiblingelementsadjacenttothefirstelementelement1.

A~B{
color:red;
}
2.2AttributeSelector

AnattributeselectorisatypeofCSSselectorthatallowselementstobeselectedbasedontheirattributevalues.Byusingattributeselectors,youcanselectspecificelementsbasedontheirattributevalues.Forexample:

a[href=”#”]{
color:blue;
}

2.3Pseudo-classSelector

Pseudo-classselectorscansetdifferentstylesforelementsbasedondifferentstatesorpositions.

  • :link-Selectanunvisitedlinkandsetitsstyle,suchastextcolora:link{background-color:yellow;}
  • :visited-Styleforvisitedlinks,suchastextcolor
  • :hover-Appliesthestylewhenthemouseishoveringovertheelement
  • a:hover{color:red;}
  • :active-appliesthestylewhentheelementisactivated(e.g.,clicked)
  • :fous-Appliesstylewhenelementgetsfocus
  • :first-child-Appliesthestylewhenthespecifiedelementisthefirstchildofitsparentelement
  • :last-child-Appliesthestylewhenthespecifiedelementisthelastchildofitsparentelement
2.4DescendantSelector

DescendantselectorsrefertoCSSselectorsthatselectelementsthroughthenestinglevelofchildelements.Theyaretwoselectorsseparatedbyspaces.Thefirstselectorselectstheparentelement,andthesecondselectorselectsitsdescendantelements.,like:

parentelementchildelement{}

AB{
color:blue;
}
B{color:red;}

2.5CommonSelectors

Commonselectorpriorities:

IDSelector(weightvalueis100)>Classselector,attributeselector,pseudo-classselector(weightvalueis10)>Labelselector,Pseudoelementselector(weightvalue1).

2.5.1TagSelector

TagselectorsmatchallelementsinanXMLpagethatusethesametag.Youcanaddstylestomarkerstochangetheirsize,color,font,andmore.

Thetagselectordirectlyuseselementandobjectnamesasselectors,asfollows(elementnameisusedasselector)

name{
font-size:20pt;

font-wight:bold;
}

2.5.2ClassSelector

Aclassselectorisastyleselectorthatstartswithaperiod”.”followedbyaclassname,andisusedtoselectagroupofelementswiththesameclassname.xmlfile

<divclass="example">
<p>HelloWorld!</p>
</div>

.my-class{
color:red;
}

2.5.3IDselector

SelectanelementthroughtheIDattributeoftheHTMLelement.TheIDattributeneedstobeuniqueintheHTMLdocument.

<divid="example">
<name>HelloWorld!</name>
</div>

#example{
color:red;
}
3.CommonCSSproperties 3.1Textattributes

font-size:fontsize(usually12px)font-size:12px;

font-family:font(preferablyuseEnglishfont)font-family:Arial;

font-weight:fontweight(100~900,ninelevels,900isthethickest)

font-style:fontstyle,forexamplefont-style:italic;

Textdisplaymode

3.2Colorattribute(foregroundcolor)

Namenotation-color:red;

“#RGB”notation-R,G,andBrepresentthethreeprimarycolorsofred,green,andbluerespectively.Eachcolorisrepresentedbytwodigitsofhexadecimal(white#FFFFFF,black#000000).

3.3Backgroundattributes

Backgroundcolorbackground-color:color;

Backgroundimagebackground-image:URL(“imagename”);

Whethertheimagerepeatstotilethebackgroundbackground-repeat

repeat(tile)/repeat-x(horizontalfilling)/repeat-y(verticaltiling)/no-repeat(notiling)

Specifythepositionofthebackgroundimagebackground-position

Percent/top/center/bottom/left/right

background-color:#ffffff;
background-image:url("animal.jpg");
background-repeat:no-repeat;
background-psition：100?nter;

3.4Borderattributes

TextborderpropertiesrefertopropertiesthatcanbeusedtodesignandsettheborderaroundtextthroughCSSstyles,including:

  1. border:Settheborderaroundthetext,includingthestyle,widthandcoloroftheborder.
  2. border-style:Setthestyleoftheelementborder.Thefollowingvaluesarecommonlyused:none:noborder/solid:solidborder/dashed:dottedborder/dotted:dottedborder/double:doubleborder
  3. padding:paddingproperty,usedtosetthespacingbetweentextandborders.
  4. margin:Marginattribute,usedtosetthespacingbetweenthetextborderandsurroundingelements.
  5. border-radius:Setthecornerradiusoftheborder.
  6. box-shadow:Settheshadoweffectaroundthetext,etc.

4.Commonlayoutattributes

4.1Floating

Floatingthelabelreferstoremovingthelabelelementfromthedocumentflowsothatitcanmovefreelywithintheparentcontainer(DIVbox).Floatedelementscanbedisplayedalongsideotherelementswithouttakinguptheentirerow.

Thefloatattributecantakeonthefollowingvalues:

floatcommonattributevalues
left Theelementfloatstotheleft right TheelementfloatstotherightFloat none Theelementdoesnotfloat
  • Theareawherethelabelissettofloatwillcovertheunfloatedarea.
  • Sincethefloatingtagnolongeroccupiesthepositionoftheoriginaldocumentflowandwillaffectthelayoutofothertags,youneedtousecleartoclearthefloatingtag,selector{clear:attributevalue;}
clearcommonattributevalues
left Cleartheeffectofleftfloatingtest right Cleartheimpactoftherightfloat both Cleartheimpactoftheleftandrightfloatingmeasurements

4.2Positioning

Labelpositioningreferstospecifyingthepositionofanelementonthepagethroughtheselectionoflabelsandthesettingofattributevalues.Thepositioningpropertiesoflabelsmainlyincludepositioningmodeandedgeoffset.

4.1.1Positioningmode

Thesyntaxformatofusingthepositionattributetopositionatagis:selector{position:attributevalue;}

Commonvaluesforthepositionattribute(childmustbeparent)
static(defaultvalue) willbearrangedonthepageaccordingtothedocumentflow,andthepositioncannotbeadjustedthroughthetop,right,bottom,andleftattributes.

relative

relativepositioning

Theelementispositionedrelativetoitspositioninthedocumentflow.Itspositioncanbefine-tunedthroughthetop,right,bottom,andleftattributes,andthepositionisstillretainedinthedocumentflow

absolute

absolutepositioning

Theelementpositionsthelabelaccordingtothenearestpositionedparentelement.Ifthereisnopositionedparentelement,itispositionedaccordingtothebrowserwindow(upperleftcorner),breakingawayfromthecontrolofstandarddocumentflow

fixed

Fixedpositioning

Aspecialformofabsolutepositioning.Theelementispositionedusingthebrowserwindowasareference.Itisnotaffectedbythescrollbarandisoutofcontrolofthestandarddocumentflow

4.2.2.Edgeoffset

Usedtospecifythedistanceoftheboxborderfromtheedgeoftheelementitcontains.Youcansetdifferentoffsetvaluesforthetop,right,bottom,andleftbordersoftheboxbyusingtheedgeoffsetproperty.

Edgeoffsetproperties
top Thedistancebetweenthetopedgeoftheelementandthetopedgeofitscontainer bottom Thedistancebetweenthebottomedgeoftheelementandthebottomedgeofitscontainer left Thedistancebetweentheleftedgeoftheelementandtheleftedgeofitscontainer right Thedistancebetweentherightedgeoftheelementandtherightedgeofitscontainer 5.Commonlayoutattributes

5.1overflowattribute

Whenthecontentinthecontainerexceedsthesizeofthecontainer,youneedtousetheoverflowattributetocontrolhowtheoverflowedcontentisdisplayed.

  1. visible:Defaultvalue,thecontentwillnotbecroppedandwillbepresentedoutsidethelabelbox.
  2. hidden:Whenthecontentexceedstheboundariesofthecontainer,itwillbecroppedandinvisible.
  3. scroll:Whenthecontentexceedstheboundaryofthecontainer,thescrollbarwillbedisplayedandthecontentcanbescrolled.
  4. auto:Similartoscroll,thedifferenceisthatthescrollbarwillnotbedisplayedwhenthecontentdoesnotoverflow.

5.2z-indexattribute

Controlsthestackingorderofelementsinastackingcontextbyspecifyingdifferentz-indexvaluestodeterminewhichelementisaboveorbelow.Elementswithhigherz-indexoverwriteelementswithlowerz-index.

Thez-indexattributeacceptspositiveintegers,negativeintegers,and0asvalues,andthedefaultvalueisauto.Thelargerthepositiveintegervalue,thehigherthehierarchyandthemorelikelytheelementwillappearatthetop.Thesmallerthenegativeintegervalue,thelowerthelevelandthemorelikelytheelementwillappearatthebottom.Ifmultipleelementshavethesamez-indexvalue,theirstackingorderwillbedeterminedbasedontheorderinwhichtheyappearintheXMLdocument.b2>b1

#b1{
z-index:1;
}

#b2{
z-index:2;
}