CSS 속기 속성

CSS 속기 속성을 사용하면 깔끔한 CSS 코드를 작성하고 시간을 절약하고 코드의 줄 수를 줄일 수 있으며 간접적으로 코드가 전문 개발자처럼 보입니다. 여기에서 속기 속성 관련 목록, 배경 이미지 및 색상을 공유하고 더 많은 것을 탐색하고 주변에서 재생합니다.

여백 및 패딩

일반 코드

#div {
margin-top: 0;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 15px;
(auto, 0, px, pt, em or %)
}

속기 속성

#div {
margin:0 5px 10px 15px;
(top right bottom left)
}

국경

일반 코드

#div {
border-width: 5px;
(thin, thick, medium or set value) (default = medium)
border-style: dotted;
(solid, dashed, dotted, double, etc) (default = none)
border-color: blue;
(named, hex, rgb or 0-255) (default = value of elements/
elements parent color property)
}

속기 속성

#div {
border:5px dotted blue;
}

배경

일반 코드

#div {
background-color: #CCCCCC;
(named, hex, rgb or 0-255) (default = transparent)
background-image: url(images/bg.gif);
(url or none) (default = none)
background-repeat: no-repeat;
(repeat, repeat-x, repeat-y or no-repeat) (default =
repeat)
background-attachment: scroll;
(fixed or scroll) (default = scroll)
background-position: top left;
(top, right, left, bottom or center) (default = 0% 0%)
}

속기 속성

#div {
background:#CCC url(images/bg.gif) no-repeat 0 0;
}

목록

일반 코드

#div {
list-style-image: url(images/bullet.gif);
(url or none) (default = none)
list-style-position: inside;
(inside or outside) (default = outside)
list-style-type: square;
(circle, disc, square, etc) (default = disc)
}

속기 속성

#div {
list-style:square inside url(images/bullet.gif);
}

이것은 단축 속성을 사용하여 코드를 작성하는 방법이며 원하는 경우 더 많이 작성하거나 다른 단축 속성을 탐색할 수도 있습니다. 이것이 내가 여기서 공유한 기본 속성입니다....!!

읽어 주셔서 감사합니다!

안녕하세요 가네쉬입니다🖐
웹 개발에 관한 기사를 매일 작성하고 개발자나 초보자에게 도움이 될 수 있는 귀중한 리소스를 공유합니다.

더 많은 콘텐츠

나를 따르라 (

)

저와 연결하여 웹 개발과 관련된 더 많은 콘텐츠를 얻을 수도 있습니다

.

친구를 지원해 주셔서 감사합니다!