黑马程序员技术交流社区

标题: 前端html和css [打印本页]

作者: 繁cy 时间: 2019-6-5 19:37
标题: 前端html和css
web
概念
javaweb 使用Java语言开发基于互联网的项目

*软件架构
1>c/s  客户端
优点 :  用户体验好
缺点::  开发  安装  部署  维护麻烦
例如  qq 迅雷

   2>b/s  浏览器/服务器端(url)
优点 1.开发安装部署维护简单

.缺点:1.如果应用过大,用户的体验会收到影响
2.对硬件要求过高

静态资源
1.HTML:用于搭建基础网页,展示页面内容
2. CSS:美化页面,布局页面
3.JavaScript:控制页面元素,让页面有一些动态的效果

==========
HTML  (最基础的网页开发语言)
超文本标记语言
超文本
标记语言<由标签构成的语言>*标记语言不是编程语言

CSS:
  1,概念:cascading Syyle Sheets 层叠样式表
  2好处:
   <1>功能强大
   <2>将内容展示和样式控制分离
         *降低耦合度 ,解耦 *让分工更容易

3.使用 :
   1,内联样式(在标签内使用style属性指定cssa代码)<div style="color=  red">内容</div>(不推荐使用)
   2.内部样式(在head标签内,定义style签,style标签的标签体内容就是css代码  (常用)
   3.外部样式:1.定义css资源文件.
2.在head标签内,定义linkb标签,引入外部资源文件

****1.2.3作用域越来越大 1不常用 2.3.以后常用
4.语法
  *格式:
      选择器{
               属性名1:属性值1;
               属性名2:属性值2;
               属性名3:属性值3;
                  .....}


5..选择器
  1.基本选择器:1>id选择器  (  #id 属性值{  }  )  2>元素选择器 ( 标签名称{  }  )  3> 类选择器 (  .class {  }  )

  2.扩展选择器:(  css 参考手册)
1.选择所有的元素  ( *{}  )
   2.并集选择器 ( 选择器1,选择器2{} )
3. 子选择器  (  选择器1  选择器2{} )
   4.父选择器 (    选择器1> 选择器2  {} )
5. 属性选择器  :  选择元素名称,属性名=属性值的元素 ( 元素名称  [属性名 = "属性值"]{} )
   6伪类选择器 :选择一些元素具有的状态( 语法:  元素:状态{ }  )
   状态: *  link:初始化的状态
            *  visited:被访问过的状态
            *  action:正在访问的状态
            * hover :鼠标悬浮的状态

6 属性 css 属性手册
1. 字体、文本
* font-size：字体大小
* color：文本颜色
* text-align：对其方式
* line-height：行高
2. 背景
* background：
3. 边框
* border：设置边框，符合属性
4. 尺寸
* width：宽度
* height：高度
5. 盒子模型：控制布局
* margin：外边距
* padding：内边距
                  * 默认情况下内边距会影响整个盒子的大小
* box-sizing: border-box;  设置盒子的属性，让width和height就是最终盒子的大小

* float：浮动
* left
* right

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2