web day03 CSS基本概念选择器

一、 CSS的基本概念
（使用CSS让单调的HEML网页更富表现力：文档体积小，便于搜索，可读性好分层思想HTML+CSS 结构和表现分离，易于维护和管理）
CSS的基本概念：CSS是层叠样式表(Cascading Style Sheet) ,用于控制网页的外观。指颜色背景大小元素定位…
二、Css选择器
css选择器，也称为选择符，用于选择需要添加样式的元素
css的基本语法:
选择器{
属性:属性值; （样式规则：键值对）
…}

全局选择器通配符通用权重 0
全局选择器：设置所有标签使用同一样式，用表示
全局选择器语法:{}
显示效果：
我是标题红色
我是段落红色
css代码：
*{ color:red;} ！结构和样式分离：分工明确，操作简单
组合选择器：
H1,h2,h3,h4,h5,p{
}
h.special,special,#one{
text-decoration:underline;//下划线
}
后代选择器：

子元素选择器：
语法：
选择器1>选择器2>…{
//样式规则
}

标签选择器元素选择器权重 1
标签选择器：用于声明标记采用的样式。
例如，p选择器用于声明所有p标签的样式，同样也可用h1选择器来声明页面中所有h1标签的样式。
标签选择器的语法：
E Selector{
{ property:value1;
property:value1;
样式规则
}
特点：选择的面比较广，不是最灵活。可以对多个标签同事进行组合声明 }
p{}直接给标签设置样式的就是标签选择器
显示效果：
例1
我是标题红色
我是段落红色

我是段落红色

我是段落红色
css代码：
p{ color:red;}
p,h1{color:red;}
3. 类选择器样式名选择器权重 10
类选择器：class 用来为一系列标签定义相同的样式。
例如：当声明了p标签为红色时，页面中的所有p标签都显示为红色，如果希望其中的几个不是红色，就需要使用类别选择器。
类选择器的语法: E.类名{样式规则}
显示效果：
执行步骤
在网页中书写css代码:
.red{ color:red;}
ID选择器权重 100
行内样式权重 1000
ID选择器和类选择器类似，但要注意同一id名在同一个页面中只能出现一次。(具有唯一性)
ID选择器的语法: #id名{}
显示效果:
执行步骤
在网页中书写css代码：
【E】#con{ color:red;}
给h1标记添加id选择器con。
伪类选择器
a:link（未被访问过,访问之前的状态）
a:hover （鼠标滑过） a:hover{text-decoration: underline;}; 鼠标放上去后有下划线
a:active（鼠标按下）
a:visited(访问过后)
伪类选择器: 用伪类定义的样式并不是作用在标记上，而是作用在标记的状态上。
我们这里只要求掌握超链接的伪类a：hover。
伪类选择器的语法:
a:hover{ }
a:active{ a:visited{
color: gray; }
color: greenyellow;
font-size: 100px;
}
显示效果:
伪类选择器
a:link（未被访问过,访问之前的状态）
a:hover （鼠标滑过） a:hover{text-decoration: underline;}; 鼠标放上去后有下划线
a:active（鼠标按下）
a:visited(访问过后)
伪类选择器: 用伪类定义的样式并不是作用在标记上，而是作用在标记的状态上。
我们这里只要求掌握超链接的伪类a：hover。
伪类选择器的语法:
a:hover{ }
a:active{ a:visited{
color: gray; }
color: greenyellow;
font-size: 100px;
}
显示效果:
css代码：
a { color:red;}
a:hover{ color:yellow;}
优先级：id>class>标签>全局
权重值：
Style 1000
Id 100
Class 10
标签（p）1
全局（*）0
(标签选择器的一种)派生选择器(包含选择器)：html div {} p a{}
三、在html中使用css的方法【CSS引用方式】
行内样式在标签后面写如：<p style=”color:red;font-size:36px”></p>
行内样式表的应用方法：在html标记内，每个标签都使用style属性定义css样式。
注：在标签内部设置（style）样式，键值对用冒号隔开
内联样式（行内样式）
特点：专人专用，不能共享【就近原则】
缺点：结构和表现没有做分离，页面的代码比较多，维护和管理麻烦
2. 内嵌样式（内部样式）在title下面写 <style></style>
内嵌样式表的应用方法：将css添加到<head>与</head>之间，
并用<style></style>标记声明的一种样式。
内部样式：作用域小的优先级高，越具体的优先级越高所以当内联和内部样式都有的时候，内联样式优先级高（专人专用，内部很多名字相同的都可以用）
特点：
1）内部样式写在<head></head>标签内，必须放在一个<style type="text/css"></style>标签内
2）在一个页面中结构和样式做了分离
3）内部样式可以给这份html文档的元素使用，不能对外共享
3. 链接样式（外部样式）在title下写link
外部样式文件的扩展名必须是.css,强调此文件中只能放样式内容，不可以有标签之类的。

一、文字属性

color字体颜色
color属性：用于定义文字的颜色。常用的表示方式有:颜色名称或十六进制，其他表示方式不要求掌握。
2. font-size字号
font-size属性:设置文字的大小。属性值只要求数字加单位，可以是百分比，其他不需要掌握。常用的网页文字大小有12px(正文)、14px（标题）
显示效果
执行步骤
html代码

<p>我是段落标签,我变成了12像素的文字哦，网页常用的文字大小为12px和14px,要记得哦！</p>
1
css代码：p{font-size:12px;}

font-family字体： “黑体”“宋体”“微软雅黑” 首先执行第一个字体
font-family属性：设置字体，如宋体、黑体、隶书等。字体的表示方式只要求掌握字体名称，其他不要求掌握。
显示效果
执行步骤
html代码
我是段落标签,我被设置成宋体,宋体是网页中常用的字体！

css代码： p{font-family:宋体; }
font-weight字体加粗
bold、bolder、600-900加粗
normal普通字体100-500
font-weight属性设置文字的粗细程度，属性值只要求掌握bold和normal、其他不要求掌握。
bold 设置粗体
normal将粗体改为正常字体
显示效果
执行步骤
给第一个h2标签和p标签分别添加类别选择器normal、bold，html代码：
我是二级标题，我正常显示了
我也是二级标题
我是段落标签,我被加粗了

我也是段落标签

css代码： body{ color:#FF0000;} .normal{ font-weight:normal;} .bold{ font-weight:bold;}
font-style字体倾斜（倾斜方式： i em address font-style ）
italic倾斜
normal普通字体
二、段落属性

文字修饰（text-decoration）:p默认情况下是text-decoration：none；
underline下划线
overline 上划线
line-through删除线
none 无修饰
text-decoration属性是文本修饰属性。属性值有underline下划线、none 无修饰、overline 上划线、line-through删除线。常用属性值underline和none，即如何为文本设置下划线，如何为带有下划线的超链接文本去掉下划线，
如：p{text-decoration:underline;}
a{text-decoration:none;}
水平对齐方式（text-align）默认 left
text-align属性：设置文本的水平对齐方式。属性值可以设置为left、center、right等，即如何为文本设置左对齐、居中对齐和右对齐，其他值不要求掌握。
如：h2{ text-align:center;}
文本缩进（text-indent）假如设置一个比较大的负数，可以做出文字消失效果
text-indent属性：设置文本块中首行的缩进，属性值可设置为数值加单位或者用em设置缩进几个字，百分比和负值不要求掌握。-2em
如：p{text-indent:24px} 或 p{text-indent:2em;}
4. 文本行高 (line-height) 如果line-height 和 height的值一样，则可以做出文字垂直居中效果
line-height属性：设置行间距，即行高。属性值可设置为数值加单位，百分比和负值，负值不要求掌握。
如：p{line-height:25px;}
代码：
p.show{
color:red;
font-family: sans-serif;
letter-spacing: 29px;/字母之间的间距/
word-spacing: 3px;
font-size: 30px;
border: 1px solid red;
line-height: 150px;
text-align: center;/对齐方式/
text-indent: 10px;/首行缩进/
text-transform: capitalize;/首字母/
text-shadow: 10px -10px 5px cornflowerblue;/文本阴影【第九单元】后面新增/
text-decoration: underline;

}
5. 边框属性【块级标签】
#yy{
border-style: dashed;/*边框虚线实心 solid */
border-width: 2px;
border-color: blue;
height: 100px;
width: 100px;
border-top-style: solid;/*顶部边框样式
}
div.love{/圆角边框/
border: 1px solid red;
height: 100px;
width: 100px;
border-radius: 50px;/边框圆角半径 50 就是园了/
box-shadow: 10px 10px 2px red;/盒子的阴影/ box-shadow: 0px 0px 10px #000000;/黑色无偏移量/
}

hello,my name is yolanda

ai 也可以对图片设置 img样式规则{}
可以简写：
Border:2px solid red; boder-left:2px dashed bule;
Height:100px; boder-bottom:2px solid red;
Width:100px;

三、背景属性background
背景属性包含背景色，背景图，背景重复，背景位置，背景附件和背景复合属性等。
背景颜色background-color
背景图片background-image:url();
背景重复：background-repeat:
属性值：repeat/no-repeat/repeat-x/repeat-y
背景位置：background-position:水平垂直;
怎么使背景图片居中？
Background-position:center; 全选
Background-position:50% 50%;
Background-position:50% center;
Background-position:center 50%;
可以取的值为关键字，数值，百分比
水平：left center right（或者数值）
垂直：top center bottom（或者数值）
背景附件（背景是否滚动属性值：scroll（默认）滚动 fixed 固定）：
background-attachment:fixed；谷歌浏览器开启：chrome://flags/#overlayscrplbars Scollbars->Rnable
background复合属性在一个声明中设置所有的背景属性，如背景颜色、背景图像、背景重复及背景位置的设置，属性值的顺序可调换。
如：background: red url(1.jpg) no-repeat right top;
body{
/*border: 1px; body也是容器
background-color: blue;
background-image:url(…/img/logo.jpg);
background-repeat: no-repeat;
background-position: 80% bottom;
background-attachment: scroll;
*/
background: red url(…/img/logo.jpg) no-repeat 20px 20px scroll;

四、列表案例符号的样式 list-style
list-style-type 定义列表前面的项目符号
Disc(实心圆)、circle(空心圆)、 square（方块）、 none（不使用任何标号）。
list-style-image 定义列表项标志的图像【设置了图片上面的不好用了最好上个属性设置成none】
语法格式如下：list-style-image:none|url(url)
list-style-position 列表位置
语法格式如下：list-style-position:outside（默认）|inside（）在列表li的里面还是外面
去掉列表案例符号的代码是: ul{list-style:none;}

列表
列表2
列表3
5. 案例实现（1）用div实现布局，从上到下分成5个，分别命名成logo,nav,banner,main,footer （2）导航用首页实现（3）主体用标题标签和段落标签实现（4）页脚用段落标签实现（5）用CSS对页面进行修饰
二、尺寸属性
即控制元素的高度和宽度，指width和height，属性值掌握用数值加单位为元素设置宽度和高度
如:div{width:200px;height:300px;}
三、盒模型包括4： border+padding+margin+width（height）
·

边框属性
边框颜色Border-color如：border-color:red;
边框样式border-style,常用边框样式：solid 实线、dashed 虚线、dotted 点线、none 取消线
边框宽度border-width如border-width:3px;
border复合属性可同时设置边框的宽度、样式和颜色，如：border: #666 solid 1px;
单独设置一条边框如：上边框border-top，右边框border-right，下边框border-bottom，左边框border-left
如:border-bottom:1px #ff0000 dashed;
注意：
四边边框和上下左右某一边的边框都使用复合属性设置：如border-top：1px solid #ccc，而border-top-style，border-top-width ， border-top-color等单独设置某一边样式、宽度、颜色等不要求掌握
内填充
padding：内容与边框之间的距离。
设置上内填充padding-top属性，右内填充padding-right属性，下内填充padding-bottom属性，左内填充padding-left属性，设置上下左右某一边的内填充。用长度加单位设置属性值如：padding-left：200px;
外边距
margin：元素与元素之间的距离。
上外边距margin-top属性，右外边距margin-right属性，下外边距margin-bottom属性，左外边距margin-left属性，设置上下左右某一边的外边距。用长度加单位设置属性值如：margin-left：200px;
margin复合属性设置所有外边距属性，用法和padding类似。
另外属性值只要求掌握数值加单位和auto，百分率和负值不要求掌握
使用盒模型布局搭建布局色块
在网页中插入网页主体div，并设置不同类名，书写css设置宽高背景，搭建布局色块，并利用margin：0 auto设置居中效果。
复合属性
padding复合属性设置所有内填充属性，用法如下：
属性值为一个数值如padding:10px,表示上右下左内填充都为10px
属性值为二个数值如padding:10px 20px,表示内填充上下都为10px，左右都为20px
属性值为三个数值如padding: 10px 20px 30px,表示内填充上为10px，左右为20px，下为30px
属性值为四个数值如padding: 10px 20px 30px 40px,表示上右下左，内填充为上为10px，右为20px，下为30px，左为40px
margin复合属性设置所有外边距属性，用法如下：
属性值为一个数值如margin:10px,表示上右下左都为10px
属性值为二个数值如margin:10px 20px,表示外边距上下都为10px，左右都为20px
属性值为三个数值如margin: 10px 20px 30px,表示外边距上为10px，左右为20px，下为30px
属性值为四个数值如margin: 10px 20px 30px 40px,表示上右下左，外边距为上为10px，右为20px，下为30px，左为40px
对元素宽高的影响
padding对元素宽高的影响
素设置宽高后，再设置padding将会影响盒子的实际大小。
盒子的实际宽=width+padding-left+padding-right+border
盒子的实际高=height+padding-top+padding-bottom+border
四、练习案例
10. 案例1及步骤

（6）向网页中插入标签

（7）在头部插入标签
（8）设置div的尺寸属性：宽200像素，高100像素
（9）利用border复合属性设置div的四周的5px、红色的实线边框
（10）将下边框border-bottom改写为：3px、绿色的虚线边框
代码为：
Html代码：
Css代码： div{ width:200px; height:100px; border:5px #FF0000 solid; border-bottom:3px #00FF00 dashed;}
案例2执行步骤:
（11）向网页中插入标签

（12）在div中插入图片
（13）在头部插入标签
（14）设置div的宽、高和背景色；
（15）设置div的内填充四边都为100px
（16）设置div的左外边距为100px
代码为：
Html代码：

Css代码： div{ width:200px; height:200px; background:#ff0000; padding:100px; margin-left:100px; } 12. 案例3执行步骤:
（17）向网页中插入标签

,并设置不同id名
（18）设置div的宽、高和背景色；
（19）设置div居中
代码为：
Html代码：

Css代码：
#header{width:960px; height:78px; background:#f00;margin:0 auto;}
#nav{ width:960px;height:38px; background:#0f0; margin:0 auto;}
#banner{width:960px;margin:0 auto;}
#main{ width:960px; height:360px; background:#ff0; margin:0 auto;}
#footer{ width:960px;height:64px; background:#eaeaea; margin:0 auto;}
（1）页面布局
（2）设置基本样式

（3）设置圆角边框：

（4）设置盒子投影

（5）设置背景渐变

（6）设置文字投影

一. CSS3新增属性

box-shadow属性盒子阴影
Box-shadow:2px 2px ;

（1） box-shadow属性的使用方法
在css3中，可以使用box-shadow属性让盒在显示时产生阴影效果。box-shadow属性的指定方法如下所示：
box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径阴影颜色
box-shadow属性常用有5个参数设置，他们分别取值：

（2）投影方式：
　　此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值“inset”,就是将外阴影变成内阴影，也就是说设置阴影类型为“inset”时，其投影就是内阴影；“outset”时，外阴影。
（3） X轴偏移量:
　　是指阴影水平偏移量其值可以取正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边；
（4） Y轴偏移量:
　　是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部；
（5）阴影模糊半径：
　　此参数是可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
（6）阴影颜色:
　　此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。
2. text-shadow属性文字阴影没有inset
（1） text-shadow的使用方法
在CSS3中，可以使用在css3中，可以使用text-shadow属性让盒在显示时产生阴影效果。text-shadow的使用方法如下：
text-shadow:X轴偏移量 Y轴偏移量阴影模糊半径阴影颜色
（2） X轴偏移量 Y轴偏移量：
这两个参数为阴影离开文字的横方向位移距离和纵方向位移距离。使用text-shadow属性时必须指定这两个参数，可以对这两个参数指定负数值。
（3）阴影的模糊半径
text-shadow:所使用的第三个参数是阴影的模糊半径，代表阴影向外模糊时的模糊范围。这个半径越大，则外阴影向外模糊的范围也就越大。
模糊半径参数为可选参数，省略这个参数时，该参数默认值为0，代表阴影不向外模糊。
（4）阴影颜色
text-shadow属性所使用的参数中第四个参数是绘制阴影时所使用的颜色，该参数可以放置在其他三个参数之后，也可放在其他三个参数之前，成为第一个参数。该参数为可选参数，不对这个参数进行指定时，使用文字颜色。
3. border-radius属性
圆角边框的绘制也是web网站或web应用程序中经常用来美化页面效果的手法之一，在css3之前，需要使用图像文件才能达到同样效果。在css3中，只要使用border-radius属性指定好圆角的半径，就可以绘制圆角边框了。
（1）指定一个半径：
border-radius：20px；
（2）绘制四个角不同半径的圆角边框(正常读法正好相反的)
border-top-left-radius: 左上角半径
border-top-right-radius:右上角半径
border-bottom-right-radius:右下角半径
border-bottom-left-radius:左下角半径

box-sizing属性
box-sizing属性，可以指定用width和height属性分别指定的宽度值和高度值是否包含元素的内部补白区域与边框的宽度和高度。
box-sizing属性的属性值为：content-box（默认值）和border-box
content-box属性值表示元素的宽度与高度不包括内部补白区域与边框的宽度与高度，border-box属性值表示元素的宽度与高度包括内部补白区域padding与边框的宽度与高度border。
Box-sizing的属性值(作用，计算盒子宽度) content-box (默认值)
Border-box
关键字
1.只包括自己 content-box
2. 不包括其他 border-box
3. border-box 包括padding+border

text-overflow属性当对象内文本溢出时的显示
（1）当对象内文本溢出时显示语法：
text-overflow ：clip | ellipsis
取值：
clip：（默认值）
不显示省略标记（…），而是简单的裁切。
：ellipsis
省略标记（…）
说明：
text-overflow属性仅是注解，当文本溢出时是否显示省略标记。要实现溢出时产生省略号的效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。

1
2
3
4
5
gradient渐变
所谓渐变是指从一种颜色慢慢过渡到另外一种颜色。
（1）绘制线性渐变
使用的代码如下：
Background:linear-gradient(to bottom,red,yellow);
第一个参数可指定的参数值如下：
参数值渐变方向
To bottom 从上往下
To right 从左往右
To top 从下往上
To left 从右往左
第二个参数和第三个参数分别表示渐变的起点色和终点色。
（2）兼容firefox浏览器的gradient
声明:由于CSS5标准还未完全订下来，所以各种内核的浏览器都有自己的标准，为了不使属性混淆，所以各家在各自标准前加了一个前缀
如：-moz-主要是firefox火狐
-webikt-主要是chrome谷歌/safari
-0-主要是opera
background:-moz-linear-gradient(top, red, blue);
（3）兼容chrome浏览器的gradient
background:-webkit-linear-gradient(top,red, blue);
预览效果
一、什么是网页布局
网页布局是指网页内容在页面上所处位置的设计。
二、浮动float属性 none(不浮动) left（左浮动） right（右浮动）
4. 设置元素向哪个方向浮动，常用属性值left和right，设置左浮动、右浮动

web day03 CSS基本概念选择器相关推荐

好程序员web前端CSS选择符（选择器）:表示要定义样式的对象
好程序员web前端CSS选择符(选择器):表示要定义样式的对象 1) 元素选择符/类型选择符(element选择器 ) 如:div{width:100px; height:100px; backgro ...
Web学习第四天——CSS简介、选择器，常用（文本、字体、列表、背景、超链接）样式
Web学习第四天--CSS简介.选择器,常用(文本.字体.列表.背景.超链接)样式一.CSS简介 (一).什么是CSS? (二).CSS能够干什么? (三).CSS语法结构 (四).CSS的使用方式 ...
HTML相玲选择器,CSS 相邻元素选择器
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素. 选择相邻兄弟如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以 ...
css有哪些选择器，优先级如何计算？
这里是修真院前端小课堂,每篇分享文从八个方面深度解析前端知识/技能,本篇分享的是: [css有哪些选择器,优先级如何计算?] 开场语: 大家好,我是IT修真院上海分院第10期的学员林璇,一枚正直纯洁 ...
Web前端css知识点概括
Web前端css知识点的简单概括如下,方便记忆. 1.字体,背景(font-style,font-weight,font-size/line-height,font-family...backgrou ...
CSS样式----标记选择器
一,概念 CSS(Cascading Style Sheet),中文译为层叠样式表,是用于控制网页样式并允许将样式信息与网页信息内容分离的一种标记性语言. 二,标记选择器 <style> ...
html css web笔记,Web/HTML/CSS/的笔记
一.web基本介绍 1.Web 是 Worl wide web 的缩写,称为全球广域网,俗称www 2.我们可以将Web理解为当前的一种互利网,对于我们来说更多的就是网站服务. 3.网站我们可以认为是 ...
CSS 伪类选择器：如何使用 CSS3 伪类
CSS 伪类选择器:如何使用 CSS3 伪类 CSS3 是个好东西,但也很容易被她的变形(transform)和动画(其中许多特性因浏览器厂商而异)特性所迷惑,因而忘了那些已经被添加到标准规范中的最为 ...
WEB前端 CSS(非布局)
目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器直接选择器组合选择器分组选择器也叫并集选择器属性选择器伪类选择器伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...

web day03 CSS基本概念选择器

web day03 CSS基本概念选择器相关推荐

最新文章

热门文章

web day03 CSS基本概念 选择器

web day03 CSS基本概念 选择器相关推荐

最新文章

热门文章

web day03 CSS基本概念选择器

web day03 CSS基本概念选择器相关推荐