笔记 - 10.3、HTML - CSS样式笔记1

    xiaoxiao2026-06-09  2

    CSS注释:以/*开头 以*/结束 eg :/* 这是CSS注释 */ 1.字体属性: --- font-family:字体类型(行书还是楷书或是其他字体类型)eg:body {font-family:"楷体";} --- font-size:字体大小。     取值范围:xx-small:绝对字体尺寸,最小           x-small:绝对字体大小,较小           small:小           medium:绝对字体默认值,正常默认值           large:大           x-large:较大           xx-large:最大           lager:相对字体尺寸,相对于父对象中字体尺寸进行相对增大。           smaller:。。。相对减小           像素值和百分比:像素值是最常用的,             百分比的取值是基于父对象中的字体的尺寸。用父对象字体尺寸乘以自对象中的字体百分比,得到自对象的字体大小。     eg:body {font-size:30px;} 或者:body {font-size:50%; } --- font-style:字体风格(斜体。。。)     取值:         italic:斜体子。         oblique:中间状态,同样是斜体字。         normal:普通字体,没有任何风格(默认值) --- font-weight:字体加粗     取值:100、200、300、400、500、600、700,800,900           bold:加粗,粗细程度等于700的粗细程度。bold = 700           normal:正常字体,不加粗 等于400           bolder:很粗的,等于900           lighter:细的,相当于100 --- font-variant:将小写的英文字母转化为大写     取值:normal:默认值,表示正常显示,原来是什么样,现在还是什么样。           small-caps:将小写的英文字母转换为大写字母,且字体较小。           --- font:复合属性     可以取值:字体族科(字体类型),字体大小,字体风格,字体加粗,每个值之间用空格隔开     复合属性取值有顺序,         分别是:字体风格 字体粗细 字体大小 字体类型,         eg: div {font:italic bold 50px "宋体";}     如果同时设置这四个样式的话,必须按照这个顺序写,这四个样式才能全部生效。     font-variant这是属性没有整合到font复合属性中,只能单独写。 2.颜色和背景属性: --- color:用来设置指定元素的文本颜色。颜色值是一个颜色的英文单词或者是一个十六进制的颜色值。 --- background-color:背景颜色。用来设置指定元素的背景的颜色。值也是一个颜色值。 --- background-image:背景图片。用来设置指定元素的背景的图片。值是一张图片的路径。     注意:在使用背景图片时:background-image的值是:url(图片路径),url() 不能少,图片路径放在小括号里面。当背景图片和背景颜色同时设置时,背景图片会覆盖在背景颜色上,就会看不到背景颜色。     eg:body {background-image:url(images/img.jpg); } --- background-repeat:背景重复(平铺)     取值:no-repeat:背景图片不重复(不平铺)           repeat:默认值,背景图片重复(平铺)           repeat-x:背景图片向X轴方向(水平)重复(平铺)           repeat-y:背景图片向Y轴方向(垂直)重复(平铺) --- background-position:背景的位置。 --- background:是背景的一复合属性,整合了背景颜色,背景图片,背景重复,背景位置这四个属性。     eg:    body {             background:green url(bj1.jpg) no-repeat Top center;         }         写法:多个值之间用空格隔开, --- 与font的区别:background与font同是复合属性,与font不同的是,background的四个值没有顺序,哪个放前面哪个放后面都一样,但是font的属性必须要有顺序才能看到效果。 3.段落属性: --- word-spacing:单词间隔。(网页中每相邻的两个用空隔开的英文单词或者是中文之间的距离。)     取值:像素值。可以使用负数。 --- letter-spacing:字符间隔,就是网页中相邻两个字符间的距离。     取值:像素值 --- text-decoration:文本修饰,用来控制一段文字的下划线、上划线、删除线。。。     取值:underline:下划线           overline:上划线           none:这是默认值,没有任何修饰,常用来去除超链接的下划线。           line-through:删除线。 --- vertical-align:垂直对其方式     取值:baseline:浏览器默认的垂直对齐方式;           sub:文字的下标。 常用来写化学方程式。           super:文字的上标。常用来写数学表达式。           top:垂直靠上对齐。           text-top:是元素和上级元素的字体向上对齐。           middle:垂直居中对齐,常用来设置图片与文字的垂直对齐方式。           text-bottom:使元素和上级元素的字体向下对齐。 --- text-transform:文本转换,英文单词大小写之间的转换。     取值:none:默认值,不转换。           capitalize:使用每个单词的第一个字母大写。           uppercase:每个单词的所有字母都大写。           lowercase:每个单词的所有字母小写。 --- text-align:水平对齐方式。     取值:left:左对齐。           right:右对齐。           center:水平居中对齐。           justify:两端对齐(一段文字没有占满一整行,使用了justify的话,就可以占满这行。)、部分浏览器不支持该属性。 --- text-indent:文本首行缩进。     取值:像素值,还可以是其它的长度单位(cm,em . . .)。         (em:一个长度单位,1em 等于 12px左右, 2em 约等于两个正常大小的汉字的宽度。) --- line-height:文本行高,相邻两行之间的间隔、默认是这行文字有多高,这行的行高就是多高。     是本行上面的空白 + 文字本身的高度 = 行高     取值:同上↑。 --- white-space:处理空白     取值:    normal:默认值。         pre:会将源代码中的空格保留,         nowrap:强制在同一行显示文本、直到遇到<br/>或者文本结束。 --- unicode-bidi、direction:文本反排 (开发用不到,了解即可。)     unicode-bidi配合direction一起使用,来设置对象的阅读顺序。     unicode-bid:         取值:    bidi-override:表示严格按照direction属性的值重排             normal:默认值。             embed:表示对象打开附加的嵌入层,direction属性的值指定嵌入层,在对象内部进行隐式重排序。     direction:         取值:    ltr:表示从左到右的顺序阅读             rtl:从右到左的顺序阅读。             inherit:表示文本流的值不可继承。 4.外边距与内边距属性: :外边距(margin) --- margin-top:上边距,用来设置元素的上边界(与其它盒子的距离)。 --- margin-bottom:下边距。 --- margin-left:左边距。 --- margin-right:右边距。 --- margin:是综合了以上四个属性,可以同时设置四个方向的外边距。     取值:都是一个长度值或者百分比。     margin的取值可以是一个、两个、三个、四个、多个值之间用空格隔开:         一个值:表示的方向是上下左右四个方向。             margin:10px;         两个值:第一个值表示上下两个方向的边距,第二个值表示左右两个方向。             margin:10px 20px;         三个值:第一个值表示上方向,第二个值表示左右方向,第三个值表示下方向。             margin:10px 20px 30px;         四个值:分别表示上、右、下、左方向的边距。             margin:10px 20px 10px 20px; :内边距(padding),用法与外边距一样 --- padding-top:上内边距。 --- padding-bottom:下内边距。 --- padding-left:左内边距。 --- padding-right:右内边距。 --- padding:综合以上四个属性。     取值:都是长度值或百分比。     padding:的取值与margin一样,可以是多个,padding的多个值对应的方向与margin的多个值对应的方向相同。 5.边框属性(border): --- 边框样式:     border-style:用来设置四个方向的边框     border-bottom-style:设置下边框样式     border-top-style:设置上边框样式     border-left-style:设置做边框样式     border-right-style:设置右边框样式     取值:         none:默认值,没有边框。         dotted:点线边框。         dashed:虚线边框。         solid:实线边框。         double:双实线边框。         groove:边框具有立体感的沟槽。         ridge:边框呈脊形。         inset:使整个边框凹陷,及在一个变宽嵌入一个立体边框。         outset:使整个边框凸陷,及在一个变宽嵌入一个立体边框。      --- 边框宽度:     border-width:用来设置四个方向的边框宽度。     border-top-width:上边框宽度。     border-bottom-width:下边框宽度。     border-left-width:左边框宽度。     border-right-width:右边框宽度。     取值:一个长度值,或者百分比。 --- 边框颜色:     border-color:用来设置四个方向的边框颜色。     border-top-color:上边框颜色     border-bottom-color:下边框颜色     border-left-color:左边框颜色     border-right-color:右边框颜色     取值:是一个颜色对应英文单词或者是一个表示颜色的十六进制颜色值。 --- border-top:上边框样式 --- border-bottom:下边框样式 --- border-left:左边框样式 --- border-right:右边框样式 --- border:是所有边框样式的复合属性,用来设置四个方向的边框样式。     以上五个属性由边框样式,宽度,颜色综合。     取值:有三个值,综合了样式,宽度,颜色三个属性         比如:border-top:1px solid red;这个属性表示上边框是一个宽度为1px,颜色为red(红色)的实线。     这三个值分别用空格隔开,没有顺序,样式属性值(如solid等)必不可少,否则将无法正确显示边框。
    最新回复(0)