前端-02CSS基础知识1

1.css层叠样式表(Cascading Style Sheets)级联样式表

css是用来美化html标签的，相当于页面化妆。

书写位置在head内部

<style type="text/css">div.div1 ul.box li,div.div1 p{color: red;}
</style>

2.选择器

选择器是一个选择谁（标签）的过程

选择器结构

选择器{属性：值;属性：值;....}

属性	解释说明
width：20px	宽
height：20px	高
background-color：red	背景颜色红色
font-size：24px	文字大小
text-align：left \| center \| right	内容水平对齐方式
text-indent：2em	首行缩进

选择器分类

1.基础选择器

标签选择器
1. 颜色的显示方式：直接写颜色的名字（red）；十六进制（常用，0-9 a-f，如#000000；前两位红色，中间两位绿色，后两位蓝色）；rgb（如（0，0，0）黑色）可用PS或FW获取颜色
类选择器（重点）
1. 谁调用，谁生效；
2. 一个标签可以调用多个类选择器使用；class="类1 类2 ..... "一般常用两个类名
3. 多个标签可以调用同一个类选择器。
4. 在标签中自定义类名-写法：.类名{属性：值；属性：值}----前面有个点
5. 类选择器命名规则：不能以数字、特殊符号和（_）开头；不建议使用汉字命名；不推荐属性名命名
ID选择器
1. 写法：#ID名字{属性：值；属性：值}
2. 特点：一个id选择器在一个页面只能使用一次，如果使用两次或2次以上，不符合W3C规范，造成JS调用出现问题；一个标签只能调用一个id选择器；一个标签可以同时调用类选择器和id选择器。
通配符选择器（不推荐使用）
1. *{属性：值；属性：值}
2. 特点：给所有的标签使用相同的样式，增加浏览器解析

2.复合选择器

概念：两个或者两个以上的基础选择器通过不同的方式连接在一起

交集选择器
1. 写法：标签+类（ID）{属性：值；属性：值}
2. 特点：即要满足使用了某个标签，还要满足使用了类（id）选择器。
后代选择器（重点）
1. 写法：选择器+空格+选择器{属性：值}
2. 后代选择器首选要满足包含（嵌套）关系。
  
  父集元素在前边，子集元素在后边。（父前子后）
  
  特点：无限制隔代。只要能代表标签，标签、类选择器、ID选择器 自由组合。
子代选择器
1. 写法：选择器>选择器{属性：值}
2. 选中直接下一代元素。
并列选择器
1. 写法：选择器+,+选择器+,选择器{属性：值}

3.文本属性和属性连写

属性
1. font-size:16px; 文字大小
2. Font-weight: 700 ; 值从100-900，文字粗细，不推荐使用font-weight:bold;
3. Font-family:微软雅黑; 文本的字体
4. Font-style: normal | italic; normal 默认值 italic 斜体
5. line-height: 行高

属性连写

font: font-style font-weight font-size/line-height font-family;

注意：font:后边写属性的值。一定按照书写顺序。

文本属性连写文字大小和字体为必写项。

Font:italic 700 16px/40px 微软雅黑;

属性	解释	值
font-style	文本风格	normal \| italia
font-weight	文本粗细	700 \| bold（不推荐）
font-family	字体	三种方法
font-size	文字大小
line-height	行高
color	文本颜色（前景色）
background-color	背景颜色
text-align	内容的水平对齐方式	left \| right \| center
text-indent	首行缩进	2em

3.文字的表达方式

直接写中文名字
写字体的英文名称
Unicode编码

4.选择器实战

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><style>.box {width: 800px;height: 200px;margin: 0 auto;}.title {text-align: center;/*font-size:28px;font-family:"微软雅黑";font-weight:normal;*/font: normal 28px "微软雅黑";}            .sub_title {text-align: center;}            .sub_title .time {color: #aabbcc;font-size: 14px;}          .sub_title .nows_title {color: #990000;font-size: 14px;}p {text-indent: 2em;line-height: 28px;}p span {color: #3399cc;}input[type="button"] {color: green;font-weight: 700;}input[type="text"] {color: red;font-size: 12px;}</style></head><body><div class="box"><h2 class="title">中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</h2><div class="sub_title"><span class="time">2014年07月16日20:11</span><span class="nows_title">新浪体育 评论中大奖（11人参与）</span><a href="#">收藏本文</a><input type="text" value="请输入查询条件"><input type="button" value="搜索"></div><hr><p>新浪体育讯　7月16日是燕京啤酒<span>[微博]</span>2014中国足协杯第三轮比赛，丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。然而就在比赛日中午，丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈，并且收拾行囊准备离开。在这样的情况下，丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。</p><p>在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会，当时俱乐部给出的解释是李虎由于身体欠佳，去医院接受治疗。然而今日李虎出现在俱乐部时，向记者否认了这一说法，并且坦言已经向俱乐部提出了辞呈。</p><p>据记者多方了解的情况，李虎<span>[微博]</span>极其教练组近来在执教成绩上承受了不小的压力，在联赛间歇期期间，教练组曾向俱乐部提出能够多引进有实力的球员补强球队，然而由于和俱乐部在投入以及成绩指标上的分歧，李虎最终和教练组一起在比赛日辞职。</p><p>这样的情况并没有影响到丽江嘉云昊队<span>[微博]</span>的队员，在比赛中丽江队在主场拼的非常凶，在暴雨之中仍然发挥出了体能充沛的优势，最终凭借点球击败了中超球队哈尔滨毅腾，顺利晋级下一轮比赛。<strong>根据中国足协杯的赛程，丽江嘉云昊队将在本月23日迎战江苏舜天队。</strong></p></div></body>
</html>

效果图：

前端-02CSS基础知识1相关推荐

网站前端开发基础知识学什么？必备技能
网站前端开发基础知识学什么?Web前端开发网页制主要由HTML.CSS.JavaScript三大要素组成.随着企业需求变,前端开发技术的三要素也演变成现今的HTML5.CSS3.jQuery.响应式布 ...
好程序员web前端教程分享web前端入门基础知识
好程序员web前端教程分享web前端入门基础知识,作为合格的Web前端工程师必须得掌握HTML.CSS和JavaScript.只懂其中一两个还不行,必须对这三门语言都要熟悉.下面我们一起来看一看吧! ...
网页编程从入门到精通杨凡_干货 | web前端入门基础知识
一名合格的web前端工程师必须得掌握HTML.CSS和JavaScript. 只懂其中一个或两个还不行,你必须对这三门语言都很熟悉. 也不是说必须对这三门语言都非常精通,但你至少要能够运用它们完成大多 ...
web前端开发基础知识_前端开发是什么？学前端开发需要学什么语言？你想成为程序员吗？...
Web前端是什么前端的本质就是通过一定的程序代码来实现用户界面的ui 交互.可以认为用户在终端所看到的和所操作的都属于前端,也就是说分为渲染页面和处理用户操作两块. 前端开发是创建Web页面或app ...
web前端开发三个阶段和三要素，学前端必备基础知识
web前端开发三个阶段和三要素是什么?下面就跟着小编一起来看看吧! Web前端市场前景广阔,吸引了很多人涌入学习,但无论是零基础小白,亦或是想要进阶深造的程序员,前端开发三个阶段和三要素都是他们必学的 ...
web前端开发基础知识_薪资30K+的web前端怎么做到的？
好的web前端年薪会有多少?首先,我们要知道怎么才能成为一个所认为的"好的web前端",其次,自己能值多少价值? 用户体验为王,是互联网时代的座右铭.人们在享受互联网带来的便捷的同 ...
前端JS基础知识复习笔记（1）
珠峰前端JS基础复习笔记(1) 在财务工作中自学了HTML和CSS之后,硬啃了JS高级编程三,实在觉得想要学的透是需要找一位好老师的,于是最近在学习周啸天老师的JS高级编程课,课外需要再补补基础,就回 ...
web前端开发基础知识整理以及前端视频教程
随着移动互联网的发展和越来越多创业公司的加入,Web前端工程师的岗位空缺越来越大,薪资迅速上涨.Web前端工程师比以往更具有号召力. 想要自学成为炙手可热的Web前端工程师?靠零碎化的短视频可不行,你 ...
前端开发基础知识汇总
一.HTML 1.前言与常用标签浏览器内核备注 IE Trident IE.猎豹安全.360极速浏览器.百度浏览器 firefox Gecko 可惜这几年已经没落了,打开速度慢.升级频繁.猪一样 ...