CSS( Cascading Style Sheets )集합-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS( Cascading Style Sheets )集합

php中世界最好的语言

Mar 09, 2018 am 09:38 AM

style

이번에는 CSS(Cascading Style Sheets) 컬렉션을 소개하겠습니다. CSS(Cascading Style Sheets) 컬렉션 사용 시 주의사항은 무엇인가요?

(참고: *가 있는 속성은 CSS3의 새로운 속성입니다.)
1. 기본 규칙
1.css는 일반적으로 HTML 요소를 표시하는 방법을 정의하는 데 사용되는 스타일 시트에 저장됩니다. CSS는 주로 선택자와 하나 이상의 선언 두 부분으로 구성됩니다.
선택기는 일반적으로 스타일을 변경해야 하는 HTML 요소입니다. 각 선언에는 속성과 해당 값이 포함됩니다.
예: p {color:red ; text-align:center}
3. 댓글: /*댓글은 다음과 같습니다*/
4.css 스타일 삽입 방법:
(1) 외부 스타일, 즉 외부 CSS 파일에서 읽은 형식을 사용해야 합니다. 웹페이지 스타일 여러 페이지에 적용해야 할 때 이 방법을 사용할 수 있습니다.
예:

<head><link rel="stylesheet" type="text/css" href="abc.css"></head>

(2) 내부 스타일, CSS 형식을 정의하려면 헤더 파일에 스타일 태그를 사용하세요. 단일 문서에 특별한 스타일이 필요할 때 사용됩니다.

예:

<head><style>p {margin-left:20px;}#x {color:yellow;}</style></head>

(3) 인라인 스타일, 즉 단일 요소 태그 내에 스타일을 작성하는 방법

우선순위: (3)>(2)> ;(1), 그러나 외부 스타일이 내부 스타일 다음에 작성되면 외부 스타일이 내부 스타일보다 우선합니다.

2. 속성 선언

1. 배경(배경)

backgroud-color            背景色，值可以是十六进制颜色值、RGB颜色表示法（如rgb(255,255,0)）、颜色名称（如：red））、transparent(透明，默认）
    backgroud-image            背景图，默认是平铺样式；如：body {backgroud-image:url(&#39;ba.jpg&#39;);}
    backgroud-repeat     　　   背景图重复方式，值有repeat-x(水平方向平铺)、repeat-y(竖直方向平铺)、no-repeat(不平铺)
    backgroud-attachment       背景图固定还随页面其余部分滚动设置，值有fixed（固定)、scroll(滚动，默认)
    backgroud-position         背景图起始位置，由x,y两个方向组成，默认都是center，x方向值有left、right、center,y方向值有top、center、bottom;如果只指定了一个值，其他的值会是center;也可用坐标，可以是有单位的(0px0px)或者是百分比的(0%0%)
    backgroud                  合并简写，把以上的所有属性按以上顺序都写在这一起（可以省略不需要的属性）；如：body {backgroud:red url(&#39;p.png&#39;) no-repeat right top;}
    backgroud-clip*            背景的绘制区域，值：border-box(默认),padding-box(衬距方框内)，content-box(内容方框内)；
    backgroud-origin*          背景图片定位区域，padding-box(相对边框)，border-box(相对于外边距)，content-box(相对于内容框体)；
    backgroud-size*            背景图片尺寸，值有高宽两个，如省略一个，另一个会按比例自动计算，值可以是长度单位和%

3. 폰트(font)

color           　　 文本颜色，值为CSS颜色值，可有多种表达方式；
    direction       　　 文本书写方向，值有rtl(从右到左)、ltr（默认从左到右）；
    letter-spacing      字符间距，值为以px像素为单位的值，可以使用负值；
    line-height         行间距，值可以使用像素(px),也可使用数字，也可使用百分比（是在当前字体尺寸上进行百分比缩放）；
    text-align          对齐方式，值有left、right、center、justify（两端对齐）；
    text-decoration　　  修饰，值有underline(下划线)、overline(上划线)、line-through(删除线)、blink(闪烁)、none(默认无);
    text-indent         缩进，值为像素值；
    text-shadow*   　　  阴影，值有四个参数：h-shadow(垂直阴影)、v-shadow(水平阴影)、blur(模糊距离)、color(阴影颜色)前两个为必填项，值为像素px，后两个为可选
    text-transform      文本大小写转换，值有capitalize(capitalize)、uppercase(全部为大写)、lowercase(全部小写)、none(默认无)
    unicode-bidi   　　  文本是否重写，值有normal(默认不使用附加嵌入层)、embed(创建一个附加嵌入层)、bidi-override(创建，重新排序取决于direction属性)、iniitial(设置属性为它的默认属性)
    vertical-align  　　 垂直对齐，值有baseline(默认)、sub(下标)、super(上标)、top(元素顶端与最高元素顶端对齐)、bottom(底端与最低元素底端对齐)、text-top(父元素顶端对齐)、middle(父元素居中)、text-bottom(父元素底端对齐)、%(使用line-height值百分比排列)
    white-space         空白处理方式,值有normal(默认忽略空白)、pre(保留空白)、nowrap(文本不换行，直到<br>)、pre-wrap(保留空白符，也能正常换行)、pre-line(合并空白序列，保留换行)
    word-spacing        字段单词间距，值为像素px;
    hanging-punctuation*设置标点字符是否位于线框外，值none(不在框外放置),first(放在行首边缘外),last(行尾边缘),allow-end,force-end;
    punctuation-trim*   对标点进行修剪，值：none,start(在开头放置标点）,end(在行尾修剪结束标点),allow-end,adjacent;
    text-align-last*    最后一行对齐方式，值：auto(默认左）,left,right,center,justify（两端对齐），start,end,initial,inherit;
    text-emphasis*      重点标记文本，包括两个值，风格和颜色；
    text-justify*       规定当 text-align 设置为 "justify" 时所使用的对齐方法。值：auto,none,inter-word（增减单词间距）,inter-ideograph(用表意文本来排齐),inter-cluster(对不包含内部单词间隔内容对齐，如汉语）,kashida(对字符进行拉伸来对齐),distribute;
    text-outline*       文本轮廓,包含三个值：thickness,blur,color;第一个为必需的，后两个为可选的；
    text-overflow*      文本溢出时处理；值：clip(修剪),ellipsis（显示省略号），string(用给定字符来显示）；
    text-wrap*          换行规则，值：normal,none(不换行),unrestricted(在任意两个字符间换行),suppress((压缩元素中的换行）；
    word-break*         非中日韩文本换行规则，值：normal,break-all(允许在单词内换行),keep-all(只能在半角空格或连字符处换行);
    word-wrap*          对长的不可分割单词进行分割并换到一下行；值：normal,break-word(可在单词内进行换行);

4. 리스트(ul)

    font-family        类型，如果字体名字超过一个单词需要用引号包围起来，可以同时指定多个字体，用于浏览器不支持一种字体，会继续尝试下一种字体
    font-size          大小，默认是16px,值可以使用绝对大小px，也可以使用相对大小em，此单位在当前浏览器的16px基础上进行缩放；还有：xx-samll,x-small,small,medium,large,x-large,xx-large,samller,larger;
    font-style         样式，值有normal(默认)、italic（斜体）、oblique(倾斜)；
    font-variant       字号，值small-caps小型大写字母字体，即虽然是大写字母，但大小会比普通的小；
    font-weight        粗细，值有normal(默认,400)，bold(加粗，700)，lighter(更细)，也可以设为100-900的整百数值；
    font               字体所有属性集合；

5. 테두리(border)

    list-style-image       列表项标记图像，值为url(&#39;anypicture.png&#39;)；
    list-style-position    列表项目标记位置，值有inside(文本内)，outside(文本外，位于左侧)；
    list-style-type        列表标记类型，值有none(无标记),disc(默认实心圆),circle(空心圆),square(实心方块)，decimal(数字),以及罗马英文拉丁等；
    list-style             列表所有属性集合；顺序依次为type,position,image;如果是对其子项进行选择，只需使用ul li样式选择

6. 아웃라인(outline)

아웃라인은 테두리의 가장자리에 위치한 선으로,

    border                边框所有属性合集；对所有边框设置统一格式，值为width style color的值；可缺省，无顺序要求；
    border-style          边框所有样式合集；一个值表示四边，两个值依次为上下、左右，三个值依次为上、左右、下，四个值为上、右、下、左；
    border-width          边框所有宽度合集；赋值顺序同上；
    border-color          边框所有颜色合集；赋值顺序同上；
    border-bottom         下边框所有属性合集；值为width style color的值；可缺省，无顺序要求；
    border-bottom-color   下边框颜色，值为css颜色；
    border-bottom-style   下边框样式，值有none(无边框)，hidden(同none，但在用于表格时除外)，dotted(点状),dashed(虚线),solid(实线),double(双线),groove(定义双线，宽度为border-width),ridge(三维菱形),inset(三维凹边框),outset(三维凸边框)；
    border-bottom-width   下边框宽度，值有medium(默认),thick,thin,像素值px;
    border-left           左边框所有属性合集；
    border-left-color     左边框颜色；
    border-left-style     左边框样式；
    border-left-width     左边框宽度；
    border-right          右边框所有属性合集；
    border-right-color    右边框颜色；
    border-right-style    右边框样式；
    border-right-width    右边框宽度；
    border-top            上边框所有属性合集；
    border-top-color      上边框颜色；
    border-top-style      上边框样式；
    border-top-width      上边框宽度；
    border-image*         以图片为边框样式合集；例：{  -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */ -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */ border-image: url(border.png) 30 round;}
    border-image-source*  图片源，值为url(源)；
    border-image-slice*   图像的边界向内偏移度，值为px,%,fill（保留图像的中间部分）；
    border-image-width*   图像边界宽度，值为：auto,数字(border-width倍数)，%；
    border-image-outset*  设置在边框外部绘制图片的量，包括上右下左四个值（例：1 1 1 1 ），两个值为上下、左右，三个值为上、左右、下；值为：数字（border-width倍数）,长度单位值；
    border-image-repeat*  图片铺陈样式，值有stretch(默认拉伸)，repeat(平铺)，round(平铺，但如能完整平铺则会进行缩放)，space(如不能完整平铺，扩展空间分布在图片周围),initial,inherit;
    border-radius*        指定从左上角开始顺时针四个角的圆角度，四个值，值可缺省；值：长度单位，%；
    box-shadow*           把一个或多个下拉阴影添加到框上，例：h-shadow v-shadow blur spread color inset除了颜色外值都是长度单位值，前两个是必填的，其他为可选；

7. Outside Margin

     outline          所有轮廓属性合集；无顺序要求；
     outline-color    颜色；值为css颜色；
     outline-style    样式；值有none(无边框)，dotted(点状),dashed(虚线),solid(实线),double(双线),groove(定义双线，宽度为outline-width),ridge(三维菱形),inset(三维凹边框),outset(三维凸边框)
     outline-width    宽度；值有medium(默认),thick,thin,像素值px;

8. Padding

     margin            四边属性合集，值可以是像素、厘米、百分比（相对父元素）；一个值表示四边，两个值依次为上下、左右，三个值依次为上、左右、下，四个值为上、右、下、左；        margin-bottom     下外边距；值可以是像素、厘米、百分比（相对父元素）；
     margin-left       左外边距；值可以是像素、厘米、百分比（相对父元素）；
     margin-right      右外边距；值可以是像素、厘米、百分比（相对父元素）；
     margin-top        上外边距；值可以是像素、厘米、百分比（相对父元素）；

9. 요소 크기(치수)

를 사용하여 요소의 높이와 너비를 조절할 수도 있습니다. 줄 간격을 늘리는 데 사용됩니다. 더 흥미로운 정보를 알고 싶으시면 PHP 중국어 웹사이트의 다른 관련 기사도 주목해주세요!

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.