HTML class Attribute - W3Schools

文章推薦指數: 80 %
投票人數:10人

HTML elements can belong to more than one class. To define multiple classes, separate the class names with a space, e.g.

. The element ... Tutorials References Exercises Videos Menu Login GetCertified WebsiteNEW ProNEW HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP HOWTO W3.CSS JAVA JQUERY C C++ C# R React    Darkmode Darkcode × Tutorials HTMLandCSS LearnHTML LearnCSS LearnRWD LearnBootstrap LearnW3.CSS LearnColors LearnIcons LearnGraphics LearnSVG LearnCanvas LearnHowTo LearnSass DataAnalytics LearnAI LearnMachineLearning LearnDataScience LearnNumPy LearnPandas LearnSciPy LearnMatplotlib LearnStatistics LearnExcel XMLTutorials LearnXML LearnXMLAJAX LearnXMLDOM LearnXMLDTD LearnXMLSchema LearnXSLT LearnXPath LearnXQuery JavaScript LearnJavaScript LearnjQuery LearnReact LearnAngularJS LearnJSON LearnAJAX LearnAppML LearnW3.JS Programming LearnPython LearnJava LearnC LearnC++ LearnC# LearnR LearnKotlin LearnGo LearnDjango LearnTypeScript ServerSide LearnSQL LearnMySQL LearnPHP LearnASP LearnNode.js LearnRaspberryPi LearnGit LearnAWSCloud WebBuilding CreateaWebsiteNEW WhereToStart WebTemplates WebStatistics WebCertificates WebDevelopment CodeEditor TestYourTypingSpeed PlayaCodeGame CyberSecurity Accessibility DataAnalytics LearnAI LearnMachineLearning LearnDataScience LearnNumPy LearnPandas LearnSciPy LearnMatplotlib LearnStatistics LearnExcel LearnGoogleSheets XMLTutorials LearnXML LearnXMLAJAX LearnXMLDOM LearnXMLDTD LearnXMLSchema LearnXSLT LearnXPath LearnXQuery × References HTML HTMLTagReference HTMLBrowserSupport HTMLEventReference HTMLColorReference HTMLAttributeReference HTMLCanvasReference HTMLSVGReference GoogleMapsReference CSS CSSReference CSSBrowserSupport CSSSelectorReference Bootstrap3Reference Bootstrap4Reference W3.CSSReference IconReference SassReference JavaScript JavaScriptReference HTMLDOMReference jQueryReference AngularJSReference AppMLReference W3.JSReference Programming PythonReference JavaReference ServerSide SQLReference MySQLReference PHPReference ASPReference XML XMLDOMReference XMLHttpReference XSLTReference XMLSchemaReference CharacterSets HTMLCharacterSets HTMLASCII HTMLANSI HTMLWindows-1252 HTMLISO-8859-1 HTMLSymbols HTMLUTF-8 × ExercisesandQuizzes Exercises HTMLExercises CSSExercises JavaScriptExercises SQLExercises MySQLExercises PHPExercises PythonExercises NumPyExercises PandasExercises SciPyExercises jQueryExercises JavaExercises C++Exercises C#Exercises RExercises KotlinExercises GoExercises BootstrapExercises Bootstrap4Exercises Bootstrap5Exercises GitExercises Quizzes HTMLQuiz CSSQuiz JavaScriptQuiz SQLQuiz MySQLQuiz PHPQuiz PythonQuiz NumPyQuiz PandasQuiz SciPyQuiz jQueryQuiz JavaQuiz C++Quiz C#Quiz RQuiz KotlinQuiz XMLQuiz BootstrapQuiz Bootstrap4Quiz Bootstrap5Quiz CyberSecurityQuiz AccessibilityQuiz Courses HTMLCourse CSSCourse JavaScriptCourse FrontEndCourse SQLCourse PHPCourse PythonCourse NumPyCourse PandasCourse DataAnalyticsCourse jQueryCourse JavaCourse C++Course C#Course RCourse XMLCourse CyberSecurityCourse AccessibilityCourse Certificates HTMLCertificate CSSCertificate JavaScriptCertificate FrontEndCertificate SQLCertificate PHPCertificate PythonCertificate DataScienceCertificate Bootstrap3Certificate Bootstrap4Certificate jQueryCertificate JavaCertificate C++Certificate ReactCertificate XMLCertificate × Tutorials References Exercises PaidCourses Spaces Videos Shop Pro HTMLTutorial HTMLHOME HTMLIntroduction HTMLEditors HTMLBasic HTMLElements HTMLAttributes HTMLHeadings HTMLParagraphs HTMLStyles HTMLFormatting HTMLQuotations HTMLComments HTMLColors Colors RGB HEX HSL HTMLCSS HTMLLinks Links LinkColors LinkBookmarks HTMLImages Images ImageMap BackgroundImages ThePictureElement HTMLFavicon HTMLTables HTMLTables TableBorders TableSizes TableHeaders Padding&Spacing Colspan&Rowspan TableStyling TableColgroup HTMLLists Lists UnorderedLists OrderedLists OtherLists HTMLBlock&Inline HTMLClasses HTMLId HTMLIframes HTMLJavaScript HTMLFilePaths HTMLHead HTMLLayout HTMLResponsive HTMLComputercode HTMLSemantics HTMLStyleGuide HTMLEntities HTMLSymbols HTMLEmojis HTMLCharset HTMLURLEncode HTMLvs.XHTML HTMLForms HTMLForms HTMLFormAttributes HTMLFormElements HTMLInputTypes HTMLInputAttributes HTMLInputFormAttributes HTMLGraphics HTMLCanvas HTMLSVG HTMLMedia HTMLMedia HTMLVideo HTMLAudio HTMLPlug-ins HTMLYouTube HTMLAPIs HTMLGeolocation HTMLDrag/Drop HTMLWebStorage HTMLWebWorkers HTMLSSE HTMLExamples HTMLExamples HTMLQuiz HTMLExercises HTMLCertificate HTMLSummary HTMLAccessibility HTMLReferences HTMLTagList HTMLAttributes HTMLGlobalAttributes HTMLBrowserSupport HTMLEvents HTMLColors HTMLCanvas HTMLAudio/Video HTMLDoctypes HTMLCharacterSets HTMLURLEncode HTMLLangCodes HTTPMessages HTTPMethods PXtoEMConverter KeyboardShortcuts HTMLclassAttribute ❮Previous Next❯ TheHTMLclassattributeis usedtospecifyaclassforanHTMLelement. MultipleHTMLelementscansharethesameclass. UsingTheclassAttribute Theclassattributeisoftenusedtopoint toaclassnameinastylesheet.ItcanalsobeusedbyaJavaScripttoaccessand manipulateelementswiththespecificclassname. Inthefollowingexamplewehavethree
elements withaclassattributewiththevalueof "city".Allofthethree
elementswillbestyledequallyaccordingtothe.city styledefinitionintheheadsection: Example  

London

 

LondonisthecapitalofEngland.

 

Paris

 

ParisisthecapitalofFrance.

 

Tokyo

 

TokyoisthecapitalofJapan.

TryitYourself» Inthefollowingexamplewehavetwoelements withaclassattributewiththevalueof "note".Both elementswillbestyledequallyaccordingtothe.note styledefinitionintheheadsection: Example

MyImportant

Heading

Thisissomeimportant

text. TryitYourself» Tip:TheclassattributecanbeusedonanyHTMLelement. Note:Theclassnameiscasesensitive! Tip:YoucanlearnmuchmoreaboutCSSinourCSSTutorial. TheSyntaxForClass Tocreateaclass;writeaperiod(.)character,followedbya classname. Then,definetheCSSpropertieswithincurlybraces{}: Example Createaclassnamed"city": London

LondonisthecapitalofEngland.

Paris

ParisisthecapitalofFrance.

Tokyo

TokyoisthecapitalofJapan.

TryitYourself» MultipleClasses HTMLelementscanbelongtomorethanoneclass. Todefinemultipleclasses,separatetheclassnameswithaspace,e.g.
.Theelementwillbestyledaccordingtoallthe classesspecified. Inthefollowingexample,thefirst

elementbelongstoboththe cityclassandalsotothemainclass, andwillgettheCSSstylesfrombothoftheclasses:  Example

London

Paris

Tokyo

TryitYourself» DifferentElementsCanShareSameClass DifferentHTMLelementscanpointtothesameclassname. Inthefollowingexample,both

and

pointstothe"city"class andwillsharethesamestyle: Example Paris

ParisisthecapitalofFrance

TryitYourself» UseofTheclassAttributeinJavaScript TheclassnamecanalsobeusedbyJavaScripttoperformcertaintasksfor specificelements. JavaScriptcanaccesselementswithaspecificclassnamewiththegetElementsByClassName()method: Example Clickonabuttontohideallelementswiththeclassname "city": TryitYourself» Don'tworryifyoudon'tunderstandthecodeintheexampleabove. YouwilllearnmoreaboutJavaScriptinourHTMLJavaScriptchapter,oryoucanstudyour JavaScriptTutorial. ChapterSummary TheHTMLclassattributespecifiesoneor moreclassnamesforanelement ClassesareusedbyCSSandJavaScripttoselectandaccessspecific elements Theclassattributecanbeusedonany HTMLelement Theclassnameiscasesensitive DifferentHTMLelementscanpointtothesameclassname JavaScriptcanaccesselementswithaspecificclassnamewiththegetElementsByClassName() method HTMLExercises TestYourselfWithExercises Exercise: Createaclassselectornamed"special". Addacolorpropertywiththevalue"blue"insidethe"special"class. Myparagraph

SubmitAnswer» StarttheExercise ❮Previous Next❯ NEW WejustlaunchedW3Schoolsvideos Explorenow COLORPICKER Getcertifiedbycompletingacoursetoday! w3schoolsCERTIFIED.2022 Getstarted CODEGAME PlayGame


請為這篇文章評分?