zoukankan      html  css  js  c++  java
  • CSS基础(1)

    1.CSS的发展历程

    随着HTML的成长,HTML本身自带了一些样式功能,这就导致了HTML越来越杂乱,HTML页面也越来越臃肿, 于是CSS便诞生了.

    2.CSS介绍

    CSS(Cascading Style Sheets)

    CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。

    简单来说一句话,就是用来给HTML标签设置外观样式的,让我们的HTML页面更加的丰富多彩.

     

    3.css的书写位置(重点)

    行内式 就是写在标签内添加样式

    <div style="color:red;font-size:130px;">今天开始学习CSS样式结构</div>

    内嵌式 在同一个页面的head标签的一对style标签内写样式 页面结构比较简单

    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>内嵌样式的写法</title>
      <style type="text/css">
        div {
          color:cyan;
          font-size: 80px;
        }
        /* 内嵌样式的写法,是写在同一个页面中的head标签的style标签内 */
      </style>
    </head>
    <body>
      <div>但行好事,莫问前程</div>
    </body>

    外链式 就是将样式写在一个单独的css文件当中,然后使用link标签引入到对应的html文件当中, 当做大项目的时候,提倡结构和样式完分离。

    4.chrome浏览器的控制台

    在页面中单击右键--->检查--->可以看到对应的标签,在右侧可以看到对应的样式,可以通过控制台来检查对应的样式和排错.

     

    5.选择器

    要想给页面中的标签设置对应的样式,首先得先找到对应的标签,

    在CSS中,执行这一任务的样式规则部分被称为选择器(选择符)。

    直白的说,选择器就是用来获取标签的一种方式。

    标签选择器 会将当前页面中所有的标签都设置上同样的样式

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>标签选择器</title>
      <style>
        div {
          font-size: 60px;
          color: blue;
          color: red;
          /* 当一个属性被设置了多次的时候,默认以最后一次为主 */
        }
      </style>
    </head>
    <body>
      <div>但行好事,莫问前程</div>
      <p>中华人民共和国</p>
      <div>愿岁月静好,愿现世安稳</div>
    </body>
    </html>

    类选择器 只给有对应类名的标签设置样式

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>标签选择器</title>
      <style>
        div {
          font-size: 60px;
          /* color:blue;
          color: red; */
          /* 当一个属性被设置了多次的时候,默认以最后一次为主 */
        }
        .box {
           color: blue;
        }
        .demo {
          color: red;
        }
      </style>
    </head>
    <body>
      <div class="box">但行好事,莫问前程</div>
      <p>中华人民共和国</p>
      <div class="demo">愿岁月静好,愿现世安稳</div>
    </body>
    </html>

    类选择器的命名规范:

    1.如果类名比较长或是有多个词的话,可以使用中划线

    2.避免使用下划线,下划线留给js中的变量或是id名使用

    3.绝对不要使用纯数字或数字开头来命名类名,尽量避免使用中文命名,推荐使用英文单词或拼音来命名

     

    多类名选择器

    就是将多个类的样式同时作用于同一个标签上

     

    id选择器

    用法和类选择器是一样的,区别:

    类选择器就相当于是人的名字,在一个页面中,可以有多个重复的

    id选择器就相当于人的身份证号码,一个页面中不能出现相同的两个ID名

    id多用于js当中来使用

     

    *通配符选择器

    *指的是通配符选择器,会将页面中所有的标签元素都选择中,效率比较低,用的不多。

    在写一个页面的小案例的时候,或许会用到,常常是用来清除掉当前页面的所有的标签的默认内外间距。

     

    6.字体设置

    1.font-size字体大小

    font-size px em

     

     

    2.font-family 字体样式

    font-family:"宋体,仿宋,楷体,小篆,微软雅黑"

    微软雅黑或"microsoft yahei"用的是最多的

     

    3.font-weight 字体粗细

    给文字内容设置粗细,代替b或strong

     

    4.font-style 字体风格 正常还是倾斜

    给文字设置字体风格,用来代替i或em

     

    5.font字体合写

    font字体是一个复合属性,是由font-style,font-weight,font-size,font-family组成的。

    如果简写的话,有两个是必须的,font-size,font-family是必须要写的。

     

    7.链接伪类

    可以用于页面中设置一些特殊的效果

    :link 未访问过的默认状态 只对a标签起作用

    :visited   已经访问过的状态 只对a标签起作用

    :hover 鼠标悬停在上面时的效果 对任何标签都起作用

    :active   选定时的状态 对任何标签起作用

     

    8.总结

    css样式 是用来给页面中的标签设置样式的,让页面更加的丰富多彩

    书写的位置: 行内 内嵌 外链

    学会使用chrome浏览器的控制台进行查看html骨架或css样式

     

    基本选择器

    标签选择器

    类选择器

    多类名选择器

    id选择器

    通配符选择器

     

    链接伪类选择器

    :hover link visited active

     

    字体样式设置

    font-style 字体风格 正常还是倾斜 可以代替 i em

  • 相关阅读:
    php数组gbk和utf8的相互转化
    【原创】SSRS (SQL Serve Reporting Service) 访问权限的问题
    【原创】软件开发项目管理总结
    【原创】Team Foundation Server 域环境迁移
    【转载】 C#中数组、ArrayList和List三者的区别
    【转载】NuGet镜像上线试运行
    【原创】 关于全局静态变量初始化
    【转载】Fiddler进行模拟Post提交json数据,总为null解决方式
    【转载】解决Windows 10 局域网内共享的问题
    【原创】 查看端口号被占用
  • 原文地址:https://www.cnblogs.com/sauronblog/p/11441346.html
Copyright © 2011-2022 走看看