当前位置: 首页 > Web前端 > HTML5

CSS基础知识

时间:2023-04-04 23:12:19 HTML5

@import"cssstyleurlofthefile";CSS基础知识css,英文CascadingStyleSheets,中文名:层叠样式表。级联样式表。CSS是一种补充网页语言的表示语言。CSS用于网页的样式设计,包括字体、颜色、位置等。css使用的方法有4种:导入外部样式文件、导入外部样式文件、使用内部样式定义、使用内联样式定义。导入外部样式文件:导入外部样式文件:@import"cssstyleurlofthefile";使用内部样式定义:div{background-color:#ffffff;宽度:300px;高度:300px;}使用内联样式定义:

css的两个特性:层叠、继承Cascading:层叠样式的优先级:内联样式->内部样式->外部样式->浏览器默认效果。继承意味着CSS属性可以从父元素传递到子元素。cssselector元素选择器是最简单的选择器。通配符选择器,用“*”表示,表示对任何元素都有效。属性选择器格式:E[attribute]{property1:value1;property2:value2;...}语法说明E[attribute]用于选择具有指定属性的元素E[attribute=value]用于选择具有指定属性的元素E[attribute~=value]用于选择具有指定属性的元素属性值包含指定值。该值必须是一个完整的单词,前后可以有空格。E[attribute\|=value]用于选择指定值的元素以属性值开头的元素,值必须是一个完整的单词或者后面跟一个连字符“-”派生选择器派生选择器根据元素在其上下文中的位置派生选择器分为三种类型:后代选择器、子元素选择器、相邻兄弟选择器后代选择器是指所有元素都是某个元素的后代。子元素选择器是相对于父元素的一级子元素的。相邻兄弟选择器针对的是同级元素,具有相同的父元素,并且两个元素是相邻的。id选择器指定具有特定id值的HTML元素的样式。类选择器,用于指定具有指定类的HTML元素的样式。伪类选择器伪类选择器:伪类选择器和伪元素选择器伪类以冒号(:)开头,元素选择器和冒号之间不能有空格,中间不能有空格伪类名的中间。css中常用的伪类如下表所示:伪类名称说明:active为激活的元素添加样式:focus为输入焦点的元素添加样式:hover为鼠标悬停的元素添加样式:link为非活动元素添加样式为访问过的链接添加样式:visited为访问过的链接添加样式:first-child为作为其父元素的第一个子元素的元素添加样式:lang为具有指定lang属性的元素添加样式通常伪元素style伪元素选择器css中使用的如下表:伪元素名称描述:first-letter文本首字母添加样式:first-line文本首行添加样式:after元素之后添加内容:在元素之前添加内容cssbackgroundcssbackground属性如下:属性说明background-color定义背景颜色background-image定义背景图片background-repeat定义背景图片是否重复以及如何重复background-attachment定义背景图片是否跟随内容滚动background-position定义背景图片的水平位置和垂直位置。background可以在单一样式中定义各种背景属性。backgroundbackground-color用于设置背景颜色,初始值为透明。颜色值有3种类型如:颜色名称、十六进制颜色、rgb函数。background-image用于设置元素的背景图片,默认值为none。background-repeat控制图像的平铺。background-repeat的默认值为repeat,即图像沿x轴和y轴平铺。您还可以指定rpeat-x沿x轴平铺,repeat-y沿y轴平铺,或no-repeat平铺。继承父元素该属性设置为inherit。background-attachment用于设置背景图像是固定的还是随页面的其余部分滚动。默认值为:scroll,表示它可以随着页面其余部分的滚动而滚动。设置fixed,表示页面其余部分滚动时,背景图片不滚动,设置inherit,继承父元素。background-position用于设置背景图像点的位置。background可以设置background-color,background-position,background-attachment,background-repeat,background-image。css字体属性css常用字体属性表:属性说明font-family定义了文本的字体系列font-size定义了文本的字体大小font-variant定义了文本是否以smallcapsfontfont-style定义了是否显示文本的字体为斜体font-weight定义字体的粗细。font可以在一种样式中定义各种字体属性。font-family用于设置元素的字体。一般可以为元素属性值设置多种字体。font-size用于设置字体大小。font-style用于设置字体是否为斜体。默认值是正常的。当设置为斜体时,将显示为斜体样式。当设置为倾斜时,将显示为倾斜样式。font-variant用于设置字体使用小写字体,默认为normal,一旦设置为small-caps,所有小写字母都会变为大写。font-weight用于设置字体的粗细,normal的值等于400,bold的值等于700。font,可以设置font-family,font-size,font-style,font-变体,字体粗细。css文本属性表:属性描述colortextcolordirectiontextdirectionorwritingdirectionletter-spacingcharacterspacingline-heighttextlineheighttext-aligntext水平对齐属性,设置元素中文本的水平方式,取值有左,对,居中,继承。text-decoration为文字添加装饰效果,value有underline添加下划线,overline添加上划线,line-through添加删除线,blink添加闪烁效果,none修改,继承。text-indent定义文本第一行的缩进,默认值为0word-spacing定义单词之间的距离csssize属性表:属性描述width设置元素的宽度min-width设置元素的最小宽度max-width设置元素的最大宽度height设置元素的高度min-height设置元素的最小高度max-height设置元素的最大高度css列表属性表:属性说明list-style-image设置列表项标记的样式为图片,none/inherit/urllist-style-position设置列表项标记的位置,inside/outside/inheritlist-style-type设置列表项标记的类型list-style可以使用一个样式来定义各种列表属性list-style-type值描述discsolidcirclecirclehollowcirclesquareboxdecimalnumberlow-romanlowercaseRomannumberupper-romanuppercaseRomannumberlow-alphalowercaseletterupper-alphauppercaseLetternone无标签继承继承父元素的设置CSStable属性表:属性描述border-collapse设置是否合并表格边框border-spacing设置相邻单元格边框之间的距离caption-side设置表格标题的位置empty-cells设置是否在表格中的空单元格上显示边框和背景。table-layout设置表格单元格列宽的设置方法。盒模型css盒模型,包括元素内容、内边距padding、border边框、外边距。csspadding属性,元素的padding在border和content之间。csspadding的属性:属性说明padding-top元素的上边距padding-right元素的右边距padding-bottom元素的下边距padding-left元素的左边距由语句定义allpadding属性按上、右、下、左的顺序设置。填充:10px10px10px10px;cssmargin的属性:属性说明margin-top定义元素的上外边距margin-right定义元素的右外边距margin-bottom定义元素的下外边距margin-left定义元素的左外边距Margin定义所有一个语句的边距属性。CSS边框属性:属性描述border-top-style上边框的样式属性border-right-style右边框的样式属性border-bottom-style下边框的样式属性border-left-style左边框的样式属性borderborder-style设置4个边框的style属性border-top-width设置上边框的width属性border-right-width设置右边框的width属性border-bottom-width设置下边框的width属性border-left-width设置下边框属性的宽度border-width设置4个边框属性的宽度border-top-color设置上边框属性的颜色属性border-right-color设置右边框颜色属性propertyborder-bottom-color设置底部边框颜色propertyborder-left-color设置左边框颜色属性border-color设置4个边框颜色属性border-top用一条语句定义所有上边框的属性border-right一条语句定义所有右边框的属性border-bottom一条语句定义下边框的所有属性border-left一条语句定义所有左边框的属性border定义所有边框的属性withonestatementborder-width一次定义4个边框的宽度border-color一次定义4个边框颜色边框的样式为none,隐藏无边框的效果,和dottedofnone一样,效果虚线边框效果dashed,虚线边框效果double,double边框实心效果,实心边框凹槽效果,3D凹槽边框效果,3D凸凹槽效果边框效果cssoutline是画一条线左右元素,位于边框边缘的外围,以突出元素。属性说明outline-style定义轮廓的样式属性outline-color定义轮廓的颜色属性outline-width定义轮廓的宽度属性outline所有轮廓属性定义在同一条语句中3种类型:普通文档流、浮动,定位css属性中涉及的浮动属性说明float设置框需要浮动和浮动方向明确设置元素哪一侧不允许其他浮动元素clip剪裁绝对定位元素,元素必须是Absolute定位,toprightbottomleft原则overflow设置内容溢出元素框时的处理方式,取值:visible,auto,hidden,scrolldisplay设置元素如何显示,取值none,block,inline,inline-block,inheritvisibility定义元素是否可见,如果visibility设置为hidden,元素占用的空间仍然会保留,但是display:none不会保留占用的空间,value:visible,hiddencss定位属性attribute表示position元素的定位类型,值为static,absolute是absolute,relative是相对于top元素之外的z-index元素的堆叠顺序,用于设置目标对象的定位层顺序。值越大,层次越高。该属性仅在position:absolute时有效。