CSS基础

2018-11-20  本文已影响0人  Harper324
1、选择器
（1）定义：
和HTML类似，CSS也不是严格意义上的编程语言，它是一种样式表语言，也就是说，它允许有选择性地为 HTML 文档的元素添加样式。 image.png
（2）引入方式：

外链：<link rel="stylesheet" href="/path/to/style.css">
嵌入：
<style type="text/css">
li { margin: 0; list-style: none; }
p { margin: 1em 0; }
</style>
内联：<p style="margin:1em 0">Example Content</p>

（3）选择器种类：

*{...}通配选择器；p{...}标签选择器；#id{...}id选择器； .class{...}类选择器； 属性选择器；伪类选择器（基于DOM之外的信息去（比如根据用户和网页的交互）选择元素）；直接组合EF；后代E F；亲子E>F等

<!-- HTML -->
<p>
  <label>用户名：</label>
  <input name="username" value="tw" disabled>
</p>
<p>
  <label>密码：</label>
  <input type="password" required>
</p>

<!-- CSS 属性选择器 -->

<style>
  /* 选中所有的禁用的输入框 */
  input[disabled] {
    background: #ddd;
    color: #999;
    cursor: not-allowed;
  }
  /* 选中所有输入框类型为"密码"的元素 */
  input[type="password"] {
    border-color: red;
    color: red;
  }

</style>

a:link    { ... }   /* 未访问过的链接 */
a:visited { ... }   /* 已访问过的链接 */

a:hover   { ... }   /* 鼠标移到链接上的样式 */
a:active  { ... }   /* 鼠标在连接上按下时的样式 */
a:focus   { ... }   /* 获得焦点时的样式 */

<!-- 伪类的代码示例 -->
<!-- HTML -->
<nav>
  <ul>
    <li><a href="http://w3.org">W3C</a>
    <li><a href="http://example.com">example.com</a>
    <li><a href="http://www.360.com">360</a>
  </ul>
</nav>

<label>搜索：<input name="q" type="search"></label>

<!-- CSS 伪类选择器 -->
<style>
  a:link {
    color: black;
  }
  a:visited {
    color: gray;
  }
  a:hover {
    color: orange;
  }
  a:active {
    color: red;
  }
  :focus {
    outline: 2px solid red;
  }
</style>
2、字体

font-family；font-size；font-style；font-weight；line-height；letter-spacing；text-indent；text-decoration；white-space；word-break

3、层叠与继承

（1）简单选择器的特异度级别：（级别越高，优先级越高）
Level 0：*
Level 1：标签选择器、伪元素
Level 2：类、伪类、伪元素
Level 3：id
Level 4：内联
（2）样式的覆盖规则：
根据引入方式确定优先级：优先级由高到低依次为：“内联属性”——>“嵌入”——>“外链”
在同一级别后写的属性覆盖先写的：即就是在文件上代码行号更高的优先级更高
加有“！important”的样式，优先级最高：即无论哪一种情况，只要在样式上加了important,那么该样式的优先级最高。
（3）CSS样式的来源主要以下三方面：
页面开发者：即开发者写入程序中的CSS代码
用户设置：浏览器可以指定一个本地CSS文件，打开所有页面时自动加载
浏览器预设：每一个浏览器内部都有标签的默认样式
（4）那么具体是哪条声明起作用呢？规则如下：
找出匹配到的该属性所有声明
根据规则来源，优先级从低到高：
浏览器预设
用户设置
页面开发者
含 !important 的网页样式
含 !important 的用户设置样式
同一来源中，按照特异度排序，越特殊优先级越高
特异度一样时，按照样式书写顺序，后面的优先级高
初始值，在CSS中，每个属性都有一个初试值，background-color 的初始值为 transparent，margin-left 的初始值为 0，当然我们也可以将改变过后的值显式的重置为初识值，比如：background-color: initial
（5）对继承的元素来说，子元素自身的样式优先级高于从父级继承来的样式

4、盒模型

（1）定义：
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。


image.png 
<style>
    div {
        background-color: red;
        width: 300px;
        height: 500px;
        border: 25px solid green;
        padding: 25px;
        margin: 25px;
    }
</style>
5、定位和布局

（1）定位

h2.pos_left
{
    position:relative;
    left:-20px;
}
h2.pos_right
{
    position:relative;
    left:20px;
}

（2）布局

.sub{
    width: 100px;
    float: left;
}
.extra{
    width: 200px;
    float: right;
}
.main{
    margin-left: 100px; 
    margin-right: 200px;
}
说明：注意书写顺序，先写侧边栏，再写主面板
6、CSS调试

（1）使用浏览器内置的页面开发者工具，如：Chrome的DevTools ，Firefox的page inspector tool
（2）CSS验证： HTML验证器（http://jigsaw.w3.org/css-validator/）、CSS验证器（http://jigsaw.w3.org/css-validator/），可以在特定的URL上验证CSS，或者通过上传本地文件，或者直接使用CSS属性进行输入验证。

7、总结

这周学习了CSS的基础知识，学会了用CSS来控制HTML的样式，在线下培训时练习了网页的编写，现在已经能够用这两周学习的知识来编写网页啦。在学习的过程中，我的沟通交流和解决问题的能力也得到了提高。虽然目前在学习进度和对学习内容的掌握程度上能够符合训练营的任务安排，但是还是不够熟练。在接下来的学习中要注意复习前面所学的知识，遇到问题及时和老师同学沟通，坚持每日总结知识点，希望下周自己能够做得更好！加油啦！

上一篇 下一篇

猜你喜欢

热点阅读