HTML_CSS
HTML_CSS
勤劳的开发者px 发表于5个月前
HTML_CSS
  • 发表于 5个月前
  • 阅读 2
  • 收藏 0
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

1.div和span

<!--块级元素, eg: p,h1-->
<div style="border:solid 1px  red; background-color: blue;">div一</div>
<div>div二</div>
<!--内联元素, img,b-->
<span style="border: 1px dashed red;">span一</span>
<span>span二</span>
  • div
  1. 是块级元素,通常会以新行来开始(和结束)。
  2. 没有特定的含义,作为容器. div一般和css一起来使用
  • span
  1. 是内联元素,内联元素在显示时通常不会以新行开始
  2. 没有特定含义,一般作为文本容器
  • 选择:
  1. div作为容器,经常和css一起使用
  2. span一般作为文本容器

2.什么是CSS

  1. 层叠样式表
  2. 层叠:样式的层层叠加 eg:刷墙
  3. 样式表:样式的集合(属性的集合)

3.css能做什么

  1. 美化页面,修饰页面
  2. 目的:让页面的内容和样式分离(高内聚,低耦合 封装)
  3. html当做毛坯房,css当做装修
  4. 代码复用

4.css语法规范

{
属性:属性值 属性值 属性;
属性:属性值 属性值
}
  • 注意
  1. 属性和属性值用:连接
  2. 如果有多个属性值用空格隔开
  3. 如果有多个属性,属性和属性之间用;隔开

5.html和css结合方式

  • 通过标签的style属性来结合
<!--通过style属性-->
<div style="border: 1px solid red;">div一</div>
  • 通过style标签来结合(一般放在head里面)
<head>
<!--通过style标签-->
<style>
div {            border: 1px solid red;        }
</style>
</head>
  • 通过link标签结合(外部引入)
  1. 创建一个css文件(后缀是css)
  2. 通过link标签引入
<link rel="stylesheet" href="../../css/divcss.css" />

      属性:    href:css文件路径

  • 三种结合方式优先级:

       就近原则(相对于代码,也就是要修饰的标签)

6.css选择器

​        css修饰页面,作用某个标签.CSS选择器就是控制html标签,找到标签

  • 基本选择器

  • 标签选择器; 语法: 标签名{css代码}

  • <style>
    /*标签选择器*/
    div{    border: 1px solid red;}
    </style>

     

  • 类选择器; 语法: .类名{css代码}
  1. <style>
    /*类选择器*/
    .divClass{        border: 1px solid red;    }
    </style>

     

  • id选择器 ;语法: #id名{css代码}

    <style>
    /*id选择器*/
    #divId{        border: 1px red solid;    }
    </style>

     

  • 注意:

        id作为唯一标识(数据库),不要重复

  • 扩展选择器

  • 组合选择器 语法:选择器,选择器{css代码}

  • /*组合选择器*/
    div,span{
    border: 1px solid red;
    }

     

  • 关联选择器 语法:选择器 选择器{css代码}
  1. /关联选择器/
    div span{
    border: 1px solid red;
    }

     

  • 伪类

  1.  a:link {color: #FF0000}    /* 未访问的链接 */
  2. a:visited {color: #00FF00}    /* 已访问的链接 */
  3. a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
  4. a:active {color: #0000FF}    /* 选定的链接 */

7.css浮动属性

  • 设置浮动: float
<div style="float:left;"></div>
  • ​ float的取值:
  1. ​ left:左浮动
  2. ​ right:右浮动
  • 清除浮动:clear
  1. ​ 浮动对后面的元素有影响,对前面的没有影响
<div style="clear:both;"></div>
  1. ​ clear的取值
  • ​ both:清除左右浮动
  • ​ left:清除左浮动
  • ​ right:清除右浮动

8.css盒子模型

  • html的元素(标签)都可以当做盒子

  1. 盒子元素:
  • ​ border:边框
  • ​ width:宽
  • ​ height:高
  • margin:外边距
  • margin:外边距

  • margin-top,上外边距

  • margin-right,右外边距

  • margin-bottom,下外边距

  • margin-left,左外边距

注意:

  • margin:10px; 上下左右都是10px

  • margin:10px,20px; 上下是10px,左右20px

  • margin:10px,20px,30px;上是10px,右是20px,下30px,

padding:内边距,里面的元素和边框之间的距离

  • padding-top,上内边距

  • padding-right,右内边距

  • padding-bottom,下内边距

  • padding-left,左内边距

9.css常用属性

  • 边框属性

​ 语法:border : border-width|border-style|border-color, 值的顺序随意

eg: <div style="border:solid 1px  red;"></div> //给这个div设置了红色的,宽度是1px,红色的边框
border-style:solid实心的,dashed:虚线
  • 文字属性

​ font-size:字体大小

​ font-family:字体类型

​ color:设置字体颜色

​ text-decoration:设置文本的装饰。

text-decoration的取值 说明
blink 闪烁
underline 下划线
line-through 贯穿线
overline 上划线
none 无装饰
  • 背景属性

​ background-color:背景颜色

​ background-image:背景图片

  • list-style-image:列表项前的小图片
eg:<style>
li{
list-style-image: url(../../img/reg4.gif);
}
   </style>
  • display属性
  1. ​ block:显示
  2. ​ none:隐藏
共有 人打赏支持
粉丝 1
博文 51
码字总数 108225
评论 (0)
×
勤劳的开发者px
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: