web前端笔记2:CSS入门

学习和完成任务二的笔记
任务二:零基础HTML及CSS编码(一)

学习的资料

  • MDN HTML入门
  • [MDN CSS入门教程](https://developer.mozilla.org/zh-- CN/docs/Web/Guide/CSS/Getting_started)
  • 慕课HTML+CSS基础教程视频

css介绍

  • CSS 是用来指定文档显示的,让页面有不同的外观。
    如何定义一个样式,可以新建一个文件 strong.css 在文件中写如下代码
    strong {color: red;}。然后在你的html文件头部加入一行 。再打开网页你会发现之前标记 的文字由原来的 黑色 加粗变为了 红色

  • 三种样式写法
    优先级为 内联式 > 嵌入式 > 外部式

/*内联式,直接写在标签中*/
超酷的互联网
/*内嵌式,写在html文件中*/

    ......
    

/*外联式,写在单独文件中,如上段中介绍的用法*/
  • CSS的层叠与继承
    CSS的来源有三种,浏览器默认样式、用户定义样式和开发者定义样式,而优先级依次提高,也就是开发者定义的样子优先级最高会覆盖前两种定义的样式。
    同时样式之间也有继承关系,如 strong 就继承自 p,子类样式有更高的优先级。
    上面所定义的如 strong 为一条规则,而 strong 被称为标签选择器( 也就是说为某一标签设置样式规则 )。规则还可以有 classid 两个属性,对应有类选择器和id选择器。这三个优先级也是依次提高

`

类选择器 在一个CSS样式表中, 下面的规则将使所有class属性等于key的元素文字颜色呈现绿色。(这些元素不一定都是

元素。)。一个标签可以有多个类用空格隔开

.key { color: green;}

id选择器 下面的规则将使 id 等于 principal 的那个元素的文字变为粗体。同一html文件中 id必须唯一

#principal { font-weight: bolder;}

:before :after 在元素前面或者后面加元素

  • CSS伪类选择器 是加在选择器后面的用来指定元素状态的关键字。比如, hover 会在鼠标悬停在选中元素上时应用相应的样式。
a:hover{color:red:} /*鼠标移动到链接上时链接文字变红*/
  • 关系选择器
选择器 选择的元素
A E 任何是元素A的后代元素E (后代节点指A的子节点,子节点的子节点,以此类推)
A > E1 任何元素A的子元素
E:first-child 任何元素的第一个子元素E
B + E 任何元素B的下一个兄弟元素E
B ~ E B元素后面的拥有共同父元素的兄弟元素E

你可以任意组合以表达更复杂的关系。
你还可以使用星号(*)来表示”任意元素“。

  • 分组选择器
h1,span{color:red;} /*使用这种写法为多个选择器设置相同规则*/
  • !important
    在分号前加 !important 提高样式为最高优先级
p{color:red!important}

常用属性

属性 代码 说明
字体 {font-family:"宋体";} -
字号 {font-size:12px} -
颜色 {color:#ffffff} 颜色表示有多种:#ffffff,rgb{0,0,0},red
加粗 {font-weight:bold;} -
斜体 {font-style:italic;} -
下划线 {text-decoration:underline;} -
删除线 {text-decoration:line-through;} -
缩进 {text-indent:2em;} -
行间距 {line-height:3em;} -
字间距 {letter-spacing:20px;} -
对齐 {text-align:center;} -
背景色 {background:pink;} -
设置成块 {display:block;} -
设置成内联元素 {display:inline;} -
设置成内联块 {display:inline-block;} -
{width:30px;} -
{height:30px;} -

盒模型

  • 元素分类
    常用的块状元素

    ...


        常用的内联元素
        )。 第二步:为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)。 */

        第二种方法:改变块级元素的 display 为 inline 类型,然后使用 text-align:center 来实现居中效果。
        方法三:通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:-50% 来实现水平居中。

        垂直居中设置

        1. 父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。
        .wrap h2{
            margin:0;
            height:100px;
            line-height:100px;
            background:#ccc;
        }
        
        1. 父元素高度确定的多行文本(方法一):使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle。
          说到竖直居中,css 中有一个用于竖直居中的属性 vertical-align,但这个样式只有在父元素为 td 或 th 时,才会生效。所以将在居中的元素放在td中,将td设置一个高度,再设置 vertical-align:middle(默认已为middle)。
        2. 父元素高度确定的多行文本(方法二):在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell,激活 vertical-align 属性,但注意 IE6、7 并不支持这个样式。
        .container{
            height:300px;
            background:#ccc;
            display:table-cell;/*IE8以上及Chrome、Firefox*/
            vertical-align:middle;/*IE8以上及Chrome、Firefox*/
        }
        

        隐性改变display类型

        有一个有趣的现象就是当为元素(不论之前是什么类型元素,display:none 除外)设置以下 2 个句之一:
        position : absolute
        float : left 或 float:right
        元素会自动变为以 display:inline-block 的方式显示,当然就可以设置元素的 width 和 height 了且默认宽度不占满父元素。

        你可能感兴趣的:(web前端笔记2:CSS入门)