Week 2 --Introduce to CSS Part 1

头像
Fallenpetals
    阅读 5 分钟

    首先在HTML体系结构里面，CSS样式的位置
    1.写在<style>里面

    <style>
p{

}
</style>

    对于上面这种写法，这种样式表对所有的<p>组件都会生效。

    2.除了把样式放在<style>里面之外，还可以选择把所有的样式都写在一个.css文件里面，使用<link>组件引用
    <link href="mycss.css"></link>
    这就类似于微信小程序把css文件与xml文件分开了

    3.还可以指定特定标签的样式，即把样式写在标签的style属性里面
    <p style="width:100px" ></p>
    下面说说一些CSS的选择器：

    1 .classname

    .classname{

}

  <p class="classname"></p>

    组件里面的定义class，属性值为classname，那么只有类名为classname的组件才会生效

    2.selector.class

    div.main{

}

<div class="main"></div>
<p class="main"></p>

    使用selector.class,只有特定的类名为class的selector才会生效，如上为<div>生效,<p>不生效

    3.selector>selector

    <div>
  <p>I am feeling blue</p>
</div>
<section>
  <p>I just want to be left alone!</p>
</section>
    div > p {
  color: blue;
}

    从右往左读selector1>selector2,只有当selector2是selector1的直接子元素时，才会生效，如果非直接子元素，但是selector1是selector2的祖先，则这样写
    selector1 selector2
    中间留空格

    <div>
  <div>
    <div class="makeMeBlue">
      <p>I am feeling blue</p>
    </div>
  </div>
  <section class="makeMeBlue">
    <p>I just want to be left alone!</p>
  </section>
</div>
    div p {
  color: blue;
}

    如上所示，所有的<p>都会变成蓝色

    4.伪类selector:pseudo-class

    常用伪类：

    :hover
:link
:visited
:active
:nth-child(..)

    link和visited是针对链接的，前者是链接尚未点击前的样式，后者是点击链接后的样式
    hover是当用户鼠标悬停在上方时触发的样式
    active是当用户按下鼠标但还未完全释放的样式，在本视频中不做区分。

    a:link, a:visited {
  text-decoration: none;             //取消默认下划线
  background-color: green;
  border: 1px solid blue;
  color: black;
  display: block;
  width: 200px;
  text-align: center;          //在水平方向居中
  margin-bottom: 1px;
}

a:hover, a:active {
  background-color: red;
  color: purple;
}

    nth-child()非常强大，可以指定特定的子元素的样式，具体使用方式如下，可以指定第三个子元素，odd：奇数个，或者第四个子元素，那么你所指定的子元素就会呈现你所期望的样式。

    header li:nth-child(3) {
  font-size: 24px;
}

section div:nth-child(odd) {
  background-color: gray;
}

section div:nth-child(4):hover {
  background-color: green;

    4.Cascading Algorithms

    1.Origin

    在HTML结构中，执行样式是由上而下的，如果是对同一个tag声明的相同样式，比如
    color:red;
    那么后声明的会覆盖先声明的

    2.Merge

    如果一个<p>的样式声明是

    p{
color:red;
font-size:150%;
}

    另一个<p>的声明是

    p{
color:blue;
}

    那么最后会融合不同的属性，比如最后<p>的效果是color:blue,font-size:150%

    3.Inheritance


    继承就是对于DOM来说，父亲设置的样式，其子类均会继承它，比如

    body{
background-color:blue;
}

    那么在<body>中的<p>,<div>等等，即使我没有特别地去设置它的样式，也会从<body>那里继承到background-color:blue的特性

    4.Specificity


    Specificity是具体程度，越具体那么样式会越有优先权,如何评价具体，可以以评分的形式来判断

    style:当你直接在标签类指定style，则得1000分，
    id:当你给标签指定id，得100分,id的写法是id名前加#
    如：

    #myid{
color:red;
}
<p id="myid"></p>

    类与伪类:当标签拥有类与伪类时，加10分
    元素个数:当前样式表的元素个数，加相应个位上的分数

    5.文本样式

    .style {

    • font-family: Arial, Helvetica, sans-serif;
      字体类型，因为最后是在用户的计算机上显示，取决于该用户是否安装此类字体，因此可以添加多种字体保证能够正常显示
    • color: #0000ff;
      十六进制显示，前两位是红色，中间两位是绿色，最后两位是蓝色，ff代表最大值
    • font-style: italic;
      设置字体风格，斜体等等
    • font-weight: bold;
      字体粗细
    • font-size: 24px;
      字体大小
    • text-transform: uppercase;
      字体形式，
      uppercase是英文字母全部大写，
      capitalize是首字母大写，
      lowercase英文字母全小写
    • text-align: right;
      文本位置,水平居中
      }

    相对大小单位：em

    <style>
body {
  font-size: 120%;
}
</style>
</head>
<body>
<div>Regular text</div>
<div style="font-size: 2em;">2em text
  <div style="font-size: 2em;">4em text
    <div style="font-size: .5em;">2em again!</div>
  </div>
</div>
</body>

    em相当于当前字体类型的倍数，2em即两倍，而且并非我们上面讲的覆盖特性Origin，em可以叠加，由于我设置body的字体大小是原字体(大多数浏览器默认字体大小为16px)大小的1.2倍，那么在第一个div的作用下，2em text会显示为2.4倍，而第二个div不会覆盖，反而会累加，4em text显示为4.8倍

    6.The Box Modal

    对于box模型，我们可以给他添加宽度，高度等等，一个box包含以下属性

    一个比较重要的问题是，width的值其实是图中的Content部分，也就是说当你想要有一个width为300px的盒子，但是当你添加了margin,padding,border之后，他的大小会超过300px，为了解决这个问题，我们可以设置
    box-sizing:border-box
    这样的话你的总的盒子大小就会是300px，而你再次调整margin,padding等值，只会压缩Content的空间
    当然如果你想让Content的值就是300px，box被扩大无所谓，就设为
    box-sizing:content-box
    我的建议是，你应该总是使用边框大小的盒子来作为你所设置盒子的真正大小

    关于margin
    margin是外边距，需要分两种情况：

    • 当margin是左右作用时：

      正如你所期望的，第一个盒子的margin设置为40px,第二个盒子的margin设置为50px，那么他们之间的距离将会变成90px
    • 当margin是上下作用时：

      两个盒子之间的margin会被大的一方所覆盖。

    星型选择器
    正如我刚才所言，对于每个盒子，都应该设置为border-box,但是对于每一个标签，我都要去重复设置一次的话，非常麻烦，能不能利用我们所说的inheritance特性呢？我们在<body>中声明：

    body{
box-sizing:border-box;
}

    答案是无效，因为box-sizing是不能被继承的特性之一
    为此，我们可以使用start selector,具体是：

    * {
box-sizing:border-box;
}

    start selector的效果是将所有的tag选择并赋值其中的样式，对于一些浏览器自带的样式，我们也可以用start selector覆盖。

    盒子内容溢出

    当我们没有限制盒子的高度时，无论里面包含多少内容，盒子都会自动适应将其包含在内，但是当我们既限制了宽度，又限制了高度的，而且内容又非常多的时候，就会发生盒子溢出

    想要改变这种情况，对应的一个属性值是overflow,默认是visible,也就是上图
    其他的值是

    • hidden:直接剪掉超出盒子的部分
    • scroll：设置可横向滑动和纵向滑动的滑条
    • auto:设置纵向滑条

    7.Background属性

    background具有很多子属性，比如：

    • background-color:背景颜色
    • background-image:url("path") 背景图片
    • background-repeat:图片是否重复,重复的方式
    • background-position:背景图片的位置：上下左右
      我们可以单一地去取某一项来使用，也可以合并着使用，比如
    background-color:red;
background: url('yaakov.png') no-repeat top center blue;

    全部写在background里面，位置不分先后，但是下面的background会覆盖上面的red,因为声明的先后原则

    css3
    Fallenpetals
    4 声望9 粉丝
    « 上一篇
    cs61b week2--The DLList
    下一篇 »
    Week 2 --Introduce to CSS Part 2

    引用和评论

    推荐阅读
    头像
    cs61b week8 -- Binary Search Tree

    Fallenpetals阅读 1.5k

    头像
    CSS grid 布局如何添加分隔线?

    XboxYan赞 3阅读 1.8k

    头像
    原子化的未来？了解一下全面进化的CSS attr函数

    XboxYan赞 1阅读 364

    头像
    像编写文档一样轻松构建你的官网！-VitePress保姆级教程

    兔子先森阅读 2.1k

    头像
    万能的渐变！CSS 渐变实现自适应进度条

    XboxYan赞 1阅读 525

    头像
    CSS专题之继承

    CodePencil赞 1阅读 641

    头像
    CSS专题之层叠

    CodePencil赞 1阅读 557

    0 条评论
    得票最新