본문{ 안녕하세요"/> 본문{ 안녕하세요">
찾다

집  >  기사  >  웹 프론트엔드  >  HTML 및 CSS에 대한 몇 가지 지식 요약

HTML 및 CSS에 대한 몇 가지 지식 요약

零下一度
零下一度원래의
2017-06-25 09:39:551304검색

전체 페이지는 세 부분으로 구성됩니다.

  • html: Hypertext Markup Language

    • 의미 태그를 통해 페이지 "구조" 구축

  • css: Cascading Style Sheet

    • 페이지 담당 "스타일" 및 페이지 미화

  • js: 경량 스크립트 언어; 상호 작용은 두 가지 위치(동작)를 나타냅니다.

    • 페이지의 프런트 엔드에서 작성한 "애니메이션"

      ​​

    • " 프론트엔드와 백엔드의 데이터 상호 작용
      구조, 스타일, 동작 결합

CSS 소개 방법

  1. Embedded;(임베디드)

    <style>
    body{
        height:100%;
        background-color: red;
    }
</style>

  2. 인라인 스타일

    <body style="height:100%; background: #333333">

  3. 외부 링크(실제 개발) , 모든 외부 링크 사용)

    <link rel="stylesheet" href="style.css?1.1.11"/>

css 우선순위

  • Inline>embedded>externallinks

css 공통 속성 및 스타일

  • 설정이 잘못되면 노란색 느낌표가 표시됩니다.

  • 색상: 색상을 표현하는 세 가지 방법이 있습니다
    단축키: c+tab

    • 영어: red

    • rgb(255,0 ,0)

    • #fff#fff

  • font-size:字体大小

    • 快捷键：fsz30->font-size:30px
      font:400 14px/28px "宋体";

  • background:添加背景
    图片默认是横向重复和纵向重复

  • 位置：

    • 横向位置：left center right

    • 纵向位置：top center bottom

  • 综合写法：background: url("images/bg2.png") no-repeat left center red;

    • background-image:url("图片地址")

    • background-repeat:no-repeat; /repeat-x;/repeat-y

    • background-position:0 0

    • background-color:red

  • 字体是否倾斜

    • font-style:italic 倾斜／ normal 正常

  • 下划线和删除线

  • text-decoration: line-through; 删除线

  • text-decoration: none; 去除下划线

  • text-decoration: underline;添加下划线

css中的选择器：

  • 1.标签选择器：div p ul li dt dd em i u del strong b input label from table

    • 缺点：只能进行共性的操作，无法个性操作

  • 2.class选择器

  • 3.id：

    • .class名,同一个页面能有无数个相同的class名

    • #id名

    • 글꼴 크기: 글꼴 크기

  • 단축키: fsz30->글꼴 크기:30px

    글꼴: 400 14px/28px "宋体";

    • 배경: 배경 추가

  • 그림은 기본적으로 가로 및 세로로 반복됩니다

  • 위치:

    • 가로 위치: 왼쪽 가운데 오른쪽

    • 세로 위치: 상단 중앙 하단

      • 종합 작성 방법: 배경: url("images/bg2.png") 반복 없음 왼쪽 중앙 빨간색;

    배경 -image:url("이미지 주소")

    • 배경-반복:no-repeat; /repeat-x;/repeat-y

    배경 -위치:0 0

    • 배경 색상:빨간색

  • 글꼴 기울어짐 여부

글꼴 스타일: 기울임꼴 기울기/보통 일반

  • 밑줄 및 취소선

  • text -장식: 선 통과;
  • 텍스트 장식: 없음; 밑줄 제거

텍스트 장식: 밑줄 추가

  • CSS의 선택기:

  • 1. div p ul li dt dd em i u del Strong b from table

단점: 공통 작업만 수행할 수 있으며 개별 작업은 수행할 수 없습니다.

  • 2.class selector

    • 3 .id:

  • .class 이름 , 동일한 페이지에는 수많은 동일한 클래스 이름이 있을 수 있습니다

  • #id 이름, 동일한 페이지에는 ID 이름만 있을 수 있습니다(ID 이름은 반복될 수 없습니다)

  • 실제 개발 과정에서는 클래스를 사용하여 스타일을 설정하고 ID를 사용하여 요소를 얻습니다

    <div class="div1 div2 div3" id="div1"></div>
    🎜🎜🎜🎜4. 하위 항목 선택기: div p(div 컨테이너 및 하위 항목 아래의 모든 p 요소 선택) 🎜🎜🎜🎜 5. 하위 선택자: div > p(div 컨테이너 아래의 하위 항목 선택); 교차 선택자: div.div1🎜🎜🎜🎜7. 8. 와일드카드 *: 모든 요소를 ​​나타냅니다🎜🎜🎜🎜9. 순서 선택기: IE8+🎜🎜🎜🎜 🎜div > p:first-child🎜🎜🎜🎜div > p:last-child🎜🎜🎜🎜🎜 10. 다음 형제 선택기 ul li+li{}는 개발에 일반적으로 사용되는 브라우저 🎜🎜🎜🎜chrome🎜🎜🎜🎜IE7~11🎜🎜🎜🎜firefox🎜🎜🎜🎜CSS와 호환됩니다. 상속과 계단식 wont로 시작하는 부족은 선회가 상속 될 수 있습니다. 무게는 무한합니다(적을수록 좋습니다)🎜🎜🎜🎜id 무게가 클래스 무게보다 큽니다🎜🎜 🎜🎜css 상자 모델🎜🎜🎜🎜css 상자 모델은 5개 부분으로 구성됩니다: 🎜🎜🎜🎜🎜너비와 높이+ padding+border+margin🎜🎜🎜🎜🎜한 줄 텍스트의 가운데 맞춤: 높이 = 줄 높이🎜🎜🎜🎜 여러 줄 텍스트의 가운데 맞춤, 안쪽 여백 및 줄 높이🎜🎜🎜🎜padding:🎜

    • padding是内边距

    • padding的颜色和内容的颜色一致；background-color填充的是border以内的颜色

    • padding是复合值
      padding:30px; ->pl30; pt30;pr30;pb30
      padding:20px 30px; ->上下为20px 左右30px
      padding:10px 20px 30px; -> 上10px 左右20px 下30px
      padding:10px 20px 30px 10px; 上 右 下 左

      如果现设置padding:30px
      再设置padding-left:10px
      请问最后的值各是多少？
      左10px; 其他都是30px

  • margin：外边框

  • border:

    • border:1px solid #000;

    • border-width

    • border-style：solid（实体）,dashed（虚线）,dotted（点）

    • border-color

行内元素和块级元素

  • p标签虽然是文本标签，但是它可以当容器来使用，p标签内一定不能放div; p段落也是块元素，他独占一行

  • 文本元素：p span a i em u b strong img

  • 容器级：div li dt dd h级（不建议）

  • 除了p，所有的文本元素，都是行内元素

  • 所有容器级别的元素，都是块元素

  • 块和行内元素的相互转化

    • display：inline; //行内

    • display:inline-block;//行内块

    • display：block; //块

  • 关于定位：大部分情况，建议的是:父相子绝（父亲：相对定位，儿子：绝对定位）

  • 关于脱离文档流的方法

  • 浮动 float:left; float:right;

  • 绝对定位 position:absolute;

  • 固定定位 position:fixed;

  • 重点：1）父相子绝 2）行内元素一点脱离文档流，就可以设置宽高了；

  • 注意：行内元素，一旦脱离文档流，虽然能设置宽高，但是，如果不设置宽的话，会默认跟内容一样宽；而块级元素，如果不设置宽度的话，默认跟父级一样块，没有父级的话，默认跟屏幕一样宽

  • 清除浮动

    • 固定高度height:xxxpx;
      缺点：如果作为产品列表的容器展示，我们无法知道容器的具体高度

    • overflow:hidden

    • clear:both
      缺点：可以解决浮动引起的文档流错乱问题，但是上面浮动元素的父容器该没有高度还没有高度

    • 伪类清除浮动

      ul::after{
display: block;
height:0;
content: '';
clear: both;
}

  1. 溢出隐藏

  2. 清除浮动
    缺点：如果父容器比较小，子容器比较大；父容器如果通过overflow:hidden来清除浮动的话，子容器就看不到了

  • 透明度处理

    • rgba() 背景透明，文字不透明；

    • opacity:0 背景透明，文字也透明；

      opacity:0.1;/*不兼容IE7浏览器*/
filter:alpha(opacity=10);

    最基本的开发，首先必须创建的项目结构

    • images文件夹：放切好的图片

    • css文件夹：放置css文件：index.css

    • index.html文件

    关于继承

    • 宽度继承：如果没有父级，块元素的宽度默认跟可视区一样宽；如果有父级的情况下，默认跟父级宽度一样宽(宽度可以继承，但高度无法继承;)

    • font可以继承

    • color可以继承：当遇到a标签的时候， color无效；

    • line-height可以继承

    当文本超度固定宽度的处理方法：

    • 单行文本出超固定宽度出现省略号的写法：

      white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis

    • 英文不折行的问题处理： word-wrap:break-word;

    • 出现滚动条的写法overflow-y:scroll;

    区分伪类和伪元素

    • 伪元素：用:和::都可以，现在建议用::

    • 伪类：给当前选择器添加动效，只能用:

    위 내용은 HTML 및 CSS에 대한 몇 가지 지식 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

    성명：
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    이전 기사：부동 요소를 수직으로 중앙에 배치하는 방법에 대한 자세한 설명다음 기사：부동 요소를 수직으로 중앙에 배치하는 방법에 대한 자세한 설명

    관련 기사

    더보기