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;} -

盒模型