Программисты Html
Anonymous
Размер шрифта для контрольного списка [закрыто]
Сообщение
Anonymous » 16 фев 2025, 00:25
Я хочу внести некоторые изменения в контрольный список, который я сделал. Я пытаюсь изменить шрифт, но независимо от того, что я использую, например, DIV или классы, размер шрифта или цвет шрифта не меняются. Я не знаю, делает ли другой кусок кода его совпадать или что -то в этом роде, но это не имеет смысла, потому что независимо от того, что я пробую, ничего не работает. Помогите. Lang-CSS PrettyPrint-Override ">
Код: Выделить всё
html,
body {
height: 100%;
width: 100%;
overflow: scroll;
background-color: #d3dce6;
scroll-behavior: smooth;
font-family: "Courier Prime";
color: #4c585b;
}
body {
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
label {
font-size: 24px;
font-weight: 700;
cursor: pointer;
color: #525d6f;
opacity: 0.4;
transition: opacity 0.4s ease-in-out;
display: block;
width: calc(100% - 48px);
text-align: right;
z-index: 100;
user-select: none;
}
input[type="radio"] {
display: none;
width: 0;
}
label:hover,
input[type="radio"]:checked + label {
opacity: 1;
}
.popup {
width: 80%;
height: 80%;
min-height: 500px;
max-height: 1000px;
border-radius: 48px;
box-sizing: border-box;
border: 16px solid #ebf0f4;
background-color: #dfe6ed;
overflow: hidden;
box-shadow: 16px 16px 48px #2e364330;
display: flex;
.content {
display: none;
}
&:has(#tab1:checked) {
.content[data-tab="tab1"] {
display: block;
}
}
&:has(#tab2:checked) {
.content[data-tab="tab2"] {
display: block;
}
}
&:has(#tab3:checked) {
.content[data-tab="tab3"] {
display: block;
}
}
&:has(#tab4:checked) {
.content[data-tab="tab4"] {
display: block;
}
}
&:has(#tab5:checked) {
.content[data-tab="tab5"] {
display: block;
}
}
&:has(#tab6:checked) {
.content[data-tab="tab6"] {
display: block;
}
}
}
.tabs {
width: 100%;
max-width: 240px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
position: relative;
}
.marker {
position: absolute;
width: 100%;
height: 200%;
display: flex;
flex-direction: column;
top: calc(-100%);
left: 0;
transition: transform 0.2s ease-in-out;
}
.marker #bottom,
.marker #top {
background-color: #ebf0f4;
box-shadow: 32px 32px 48px #2e364315;
}
.marker #top {
height: calc(50%);
margin-bottom: auto;
border-radius: 0 0 32px 0;
}
.marker #bottom {
height: calc(50% - 72px);
border-radius: 0 32px 0 0;
}
#tab1:checked ~ .marker {
transform: translateY(calc(calc(50% / 6) * 0));
}
#tab2:checked ~ .marker {
transform: translateY(calc(calc(50% / 6) * 1));
}
#tab3:checked ~ .marker {
transform: translateY(calc(calc(50% / 6) * 2));
}
#tab4:checked ~ .marker {
transform: translateY(calc(calc(50% / 6) * 3));
}
#tab5:checked ~ .marker {
transform: translateY(calc(calc(50% / 6) * 4));
}
#tab6:checked ~ .marker {
transform: translateY(calc(calc(51% / 6) * 5));
}
.content {
flex: 1;
padding: 26px;
overflow: scroll;
}
h2 {
font-family: "Abril Fatface";
font-weight: bold;
font-size: 26px;
text-align: center;
color: #4c585b;
text-shadow: 1px 3px #eef7ff;
padding: 9px;
border-style: dashed;
border-color: #a5bfcc;
border-width: 5px;
background-color: #e5e1da;
}
aside {
background-color: #e5e1da;
width: 30%;
color: #4c585b;
display: inline-flex;
flex-flow: column;
padding: 12px;
border: 5px dashed #a5bfcc;
vertical-align: top;
font-family: "Courier Prime";
}
.quote {
color: #7e99a3;
font-size: 20px;
text-indent: 50px;
line-height: 30px;
}
.ab {
background-color: #e5e1da;
display: inline-flex;
flex-flow: column;
padding: 24px;
border: 5px dashed #a5bfcc;
width: 55%;
margin-top: 0px;
}
input[type="submit"] {
background-color: #d0ddd0;
color: white;
padding: 6px 10px;
border: none;
border-radius: 4px;
cursor: pointer;
}< /code>
Homepage
Daily Check-in
Calendar
Our Bot Linda
Puzzles
Collab w/ Amazon
The Daily Journal
Quote of the Day
"Even the smallest positive change can ripple outwards, creating a beautiful effect on your day."
Record Your Emotion
Enjoyment
Excitement
Happy
Confusion
Anxious
Fear
Anger
Disgust
Bored
Sadness
Content
Content Second Tab
Content third Tab
Content fourth Tab
Content fifth Tab
amazon web services
Подробнее здесь:
https://stackoverflow.com/questions/794 ... -checklist
1739654755
Anonymous
Я хочу внести некоторые изменения в контрольный список, который я сделал. Я пытаюсь изменить шрифт, но независимо от того, что я использую, например, DIV или классы, размер шрифта или цвет шрифта не меняются. Я не знаю, делает ли другой кусок кода его совпадать или что -то в этом роде, но это не имеет смысла, потому что независимо от того, что я пробую, ничего не работает. Помогите. Lang-CSS PrettyPrint-Override ">[code]html, body { height: 100%; width: 100%; overflow: scroll; background-color: #d3dce6; scroll-behavior: smooth; font-family: "Courier Prime"; color: #4c585b; } body { display: flex; justify-content: center; align-items: center; padding: 20px; } label { font-size: 24px; font-weight: 700; cursor: pointer; color: #525d6f; opacity: 0.4; transition: opacity 0.4s ease-in-out; display: block; width: calc(100% - 48px); text-align: right; z-index: 100; user-select: none; } input[type="radio"] { display: none; width: 0; } label:hover, input[type="radio"]:checked + label { opacity: 1; } .popup { width: 80%; height: 80%; min-height: 500px; max-height: 1000px; border-radius: 48px; box-sizing: border-box; border: 16px solid #ebf0f4; background-color: #dfe6ed; overflow: hidden; box-shadow: 16px 16px 48px #2e364330; display: flex; .content { display: none; } &:has(#tab1:checked) { .content[data-tab="tab1"] { display: block; } } &:has(#tab2:checked) { .content[data-tab="tab2"] { display: block; } } &:has(#tab3:checked) { .content[data-tab="tab3"] { display: block; } } &:has(#tab4:checked) { .content[data-tab="tab4"] { display: block; } } &:has(#tab5:checked) { .content[data-tab="tab5"] { display: block; } } &:has(#tab6:checked) { .content[data-tab="tab6"] { display: block; } } } .tabs { width: 100%; max-width: 240px; height: 100%; display: flex; flex-direction: column; justify-content: space-around; position: relative; } .marker { position: absolute; width: 100%; height: 200%; display: flex; flex-direction: column; top: calc(-100%); left: 0; transition: transform 0.2s ease-in-out; } .marker #bottom, .marker #top { background-color: #ebf0f4; box-shadow: 32px 32px 48px #2e364315; } .marker #top { height: calc(50%); margin-bottom: auto; border-radius: 0 0 32px 0; } .marker #bottom { height: calc(50% - 72px); border-radius: 0 32px 0 0; } #tab1:checked ~ .marker { transform: translateY(calc(calc(50% / 6) * 0)); } #tab2:checked ~ .marker { transform: translateY(calc(calc(50% / 6) * 1)); } #tab3:checked ~ .marker { transform: translateY(calc(calc(50% / 6) * 2)); } #tab4:checked ~ .marker { transform: translateY(calc(calc(50% / 6) * 3)); } #tab5:checked ~ .marker { transform: translateY(calc(calc(50% / 6) * 4)); } #tab6:checked ~ .marker { transform: translateY(calc(calc(51% / 6) * 5)); } .content { flex: 1; padding: 26px; overflow: scroll; } h2 { font-family: "Abril Fatface"; font-weight: bold; font-size: 26px; text-align: center; color: #4c585b; text-shadow: 1px 3px #eef7ff; padding: 9px; border-style: dashed; border-color: #a5bfcc; border-width: 5px; background-color: #e5e1da; } aside { background-color: #e5e1da; width: 30%; color: #4c585b; display: inline-flex; flex-flow: column; padding: 12px; border: 5px dashed #a5bfcc; vertical-align: top; font-family: "Courier Prime"; } .quote { color: #7e99a3; font-size: 20px; text-indent: 50px; line-height: 30px; } .ab { background-color: #e5e1da; display: inline-flex; flex-flow: column; padding: 24px; border: 5px dashed #a5bfcc; width: 55%; margin-top: 0px; } input[type="submit"] { background-color: #d0ddd0; color: white; padding: 6px 10px; border: none; border-radius: 4px; cursor: pointer; }< /code> Homepage Daily Check-in Calendar Our Bot Linda Puzzles Collab w/ Amazon The Daily Journal Quote of the Day "Even the smallest positive change can ripple outwards, creating a beautiful effect on your day." Record Your Emotion Enjoyment Excitement Happy Confusion Anxious Fear Anger Disgust Bored Sadness Content Content Second Tab Content third Tab Content fourth Tab Content fifth Tab amazon web services [/code] Подробнее здесь: [url]https://stackoverflow.com/questions/79441965/font-size-for-a-checklist[/url]