CSS常用字体属性:background-origin和background-clip介绍说明
(一)常用的字体属性:
font-weight: 属性值100-900 400等于正常 700等于bold ,数值越大,越粗
font-size:字体大小,单位可以为px或者%
font-family:字体族 比如说:微软雅黑
font-style:字体的样式 italic斜体 normal正常
font-variant:small-caps 将字母转化为小一号的大小字母
注意:所有属性也可以通过font一个属性写,例如:
font:italic bold 75%/1.8 'Microsoft Yahei',sans-serif,写的顺序:font-style font-variant font-weight font-size line-height font-famiyl,多个样式有空格分开,必须按照这个顺序写,font-size和line-height中间必须用/分开
(二)字体的颜色:color:属性值可以写颜色英文,例如:red
或者rgb(0-255,0-255,0-255);
或者rgba(0-255,0-255,0-255,0-1);0表示透明,1表示不透明
opacity:0-1;也表示透明。和rgba()的区别,该属性会作用于后代标签,而rgba()不会
(三)行距、对齐
line-height (行高) :a.像素单位,比如48px b.不带px 正常行高的倍数 c.百分数 同b(调整控件中文字垂直方向垂直居中的方式,控件的height=控件的line-height)
text-align (对齐):块级元素中文字的水平对齐方式left center right
letter-spacing (字符间距): 字与字之间的距离
text-decoration (文本修饰 ):下划线underline 删除线line-through 上划线overline none(可以去掉超链接的下划线)
overflow:控制超出范围文本的显示方式,auto根据文字多少自动显示滚动条,scroll始终显示滚动条,hidden超出范围文本隐藏,也可以通过overflow-x、overflow-y设置水平和垂直方向
text-overflow:设置多余文字的显示方式,clip裁减掉,ellipsis省略号,(重点,让每行多余的文字显示省略号,a.white-spacing:nowrap b.overflow:hiddern text-overflow:ellipsis)
text-shadow:(4个属性值:水平阴影距离 垂直阴影距离 模糊距离 阴影颜色)文本的阴影,前面2个属性值不能省。水平阴影距离越大,阴影右移。垂直阴影距离越大,阴影下移。阴影模糊距离,数值越大,阴影越来越模糊,默认为0,不模糊。阴影颜色,可以选,默认为黑色
text-indent:首行缩进,可以用像素值调整缩进大小
text-stroke:描边的粗细,描边的颜色
white-space:nowarp 设置中文行末不断行显示(中文默认自动换行,英文不会自动换行,根据空格会自动换行)
word-break:浏览器默认在空格处断行,当一个单词长度超出范围时,会不断行显示,break-all允许在单词内换行
(五)背景样式:
background (缩写形式)
background-color(背景色 )
background-image(背景图 ):url(图片的地址),背景图和背景色同时存在,背景图会覆盖背景色
background-repeat(背景图重复方式 ): no-repeat(不平铺) repeat-x(水平平铺) repeat-y(垂直平铺) repeat平铺(默认)
background-position(位置坐标、偏移量 2个属性值:水平和垂直):指定位置:left/center/right ,可以写像素或者百分比,只写一个属性值,默认写的是水平方向,另外一个方向默认垂直居中(注意:当使用像素时候,图片的左上角往各个方向移动的实际距离, 当使用百分比的时候,建议不使用负数,代表去掉图片后剩余空白距离的分布比例,例如:background-positon:30% 水平方向去掉图片后,剩余的区域3:7分)
top/center/bottom 当只写一个属性值的时候 另外一个默认居中
background-clip :border-box (从边框外缘开始显示)padding-box(从边框内缘开始显示) content-box(从文字内容开始显示,不在显示区的背景图或背景色会被裁切不显示)
background-origin:定位的起点 border-box(从边框外缘开始) padding-box(从边框内缘) content-box(从文字内容区开始)
background-size:背景图片大小 一般2个属性:宽度 高度,当只有一个属性值的时候,默认为宽度,高度等比缩放
宽高的写法:a.直接写像素 b.写百分比(父容器宽高的百分比)
Atas ialah kandungan terperinci CSS常用字体属性:background-origin和background-clip介绍说明. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas



HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.

Menggunakan bootstrap dalam vue.js dibahagikan kepada lima langkah: Pasang bootstrap. Import bootstrap di main.js. Gunakan komponen bootstrap secara langsung dalam templat. Pilihan: Gaya tersuai. Pilihan: Gunakan pemalam.

Terdapat dua cara untuk membuat garis perpecahan bootstrap: menggunakan tag, yang mewujudkan garis perpecahan mendatar. Gunakan harta sempadan CSS untuk membuat garis perpecahan gaya tersuai.

Terdapat beberapa cara untuk memasukkan imej dalam bootstrap: masukkan imej secara langsung, menggunakan tag HTML IMG. Dengan komponen imej bootstrap, anda boleh memberikan imej yang responsif dan lebih banyak gaya. Tetapkan saiz imej, gunakan kelas IMG-cecair untuk membuat imej boleh disesuaikan. Tetapkan sempadan, menggunakan kelas IMG-Sempadan. Tetapkan sudut bulat dan gunakan kelas IMG-bulat. Tetapkan bayangan, gunakan kelas bayangan. Saiz semula dan letakkan imej, menggunakan gaya CSS. Menggunakan imej latar belakang, gunakan harta CSS imej latar belakang.

Untuk menyesuaikan saiz unsur-unsur dalam bootstrap, anda boleh menggunakan kelas dimensi, yang termasuk: menyesuaikan lebar: .col-, .w-, .mw-adjust ketinggian: .h-, .min-h-, .max-h-

Untuk menubuhkan rangka kerja bootstrap, anda perlu mengikuti langkah -langkah ini: 1. Rujuk fail bootstrap melalui CDN; 2. Muat turun dan tuan rumah fail pada pelayan anda sendiri; 3. Sertakan fail bootstrap di HTML; 4. Menyusun sass/kurang seperti yang diperlukan; 5. Import fail tersuai (pilihan). Setelah persediaan selesai, anda boleh menggunakan sistem grid Bootstrap, komponen, dan gaya untuk membuat laman web dan aplikasi yang responsif.

Bagaimana cara menggunakan butang bootstrap? Perkenalkan CSS bootstrap untuk membuat elemen butang dan tambahkan kelas butang bootstrap untuk menambah teks butang

Jawapan: Anda boleh menggunakan komponen pemetik tarikh bootstrap untuk melihat tarikh di halaman. Langkah -langkah: Memperkenalkan rangka kerja bootstrap. Buat kotak input pemilih Tarikh dalam HTML. Bootstrap secara automatik akan menambah gaya kepada pemilih. Gunakan JavaScript untuk mendapatkan tarikh yang dipilih.
