web学习笔记---css(1)

CSS学习系列笔记
web学习笔记–css(1)
web学习笔记–css(2)
web学习笔记–css(3)


web学习笔记—css(1)

    • 1.css初识
    • 2.在html里面引入css的几种方式
      • 2.1外部引入式
      • 2.2文档内嵌式
      • 2.3行内式(元素内嵌式)
      • 2.4三种方式的比较
    • 3.常用样式
    • 4.选择器
      • 4.1标签选择器
      • 4.2 id选择器
      • 4.3 类选择器
      • 4.4 id和类的选择
      • 4.5 基础选择器的层级关系
      • 4.6 后代选择器
      • 4.7 交集选择器
      • 4.8 并集选择器


1.css初识

互联网前三层:

  • html:从语义的角度描述页面的内容
  • css:从审美的角度描述页面的样式
  • js:从交互的角度描述页面的行为(动态交互效果)

举个例子,女娲捏人:
人的器官有哪些->眼睛、皮肤等样式->动起来
架构->样式->动态效果
html->css->js

  • css:cascading style sheet 层叠样式表(上一层的会把底下一层覆盖掉)

2.在html里面引入css的几种方式

2.1外部引入式

先新建一个css文件,编写

@charset "UTF-8";
/*UTF-8一定要大写*/
div{
width: 100px;
height: 100px;
color: beige;
background-color: aquamarine;
}

然后将写好的css文件导入到html文件中
注意:一定要在head中引入,输入link,再按tab键

<head>

<meta charset="UTF-8">
<title>Titletitle>
<link rel="stylesheet" href="../../css/demo1_style.css">

2.2文档内嵌式

直接在html文档中写
在head中用style

<head>

<meta charset="UTF-8">
<title>Titletitle>
<style>
div{
font-size: 90px;
background-color: lightcoral;

}
style>
head>

层叠样式表:
代码第二段的效果会覆盖代码第一段的效果
有优先级

<style>
div{
font-size: 90px;
background-color: lightcoral;
}
style>
<link rel="stylesheet" href="../../css/demo1_style.css">

2.3行内式(元素内嵌式)

<div style="color: green">
我是一个盒子
div>

2.4三种方式的比较

层次性最高的:2.3行内式,直接在body中写
第1种方式,2个文件会影响页面加载时间

页面代码不多时,采用第2种
页面代码很多时,采用第1种
当完成全部,需要做小部分修改时,用第3种

3.常用样式

<style>
/*文字部分的样式*/
p {
/*文字大小*/
font-size: 100px;
/*文字颜色*/
color: transparent;
/*背景颜色*/
/*rgba:a表示透明度*/
background-color: rgba(133,200,145,1);
/*文字加粗,也可用数值表示,100-900,正常是400*/
font-weight:900;
/*文字倾斜*/
font-style: italic;
/*字体*/
font-family:新宋体;
/*下划线*/
text-decoration: underline;
/*文字阴影*/
/*参数分别代表:x轴(左右),y轴(上下),阴影的模糊程度*/
text-shadow: 20px 20px 3px black;
/*文字描边*/
-webkit-text-stroke: 2px red ;
}
style>

4.选择器

4.1标签选择器

<head>
<meta charset="UTF-8">
<title>css选择器title>
<style>
/*标签选择器:只可以描述共性,不可以个性*/
p{
color: lightcoral;
}
style>
head>
<body>
<div>
<p>我是段落1p>
<p>我是段落2p>
<p>我是段落3p>
div>

<div>
<p>我是段落4p>
<p>我是段落5p>
<p>我是段落6p>
div>


body>

4.2 id选择器

用Id
特点:
1)id在页面里面不可以重名,如果重名的话,显示的是相同的
2)可以给页面里面的任一元素命名
3)对应的选择符号是#

#p1{
    ...
}

命名方式 要求:
1)必须以字母开头,不能够以数字开头(以数字开头没用,没效果)
2)不能和标签重名,id=p 错误
3)命名要有意义
4)一定是英文
5)只能有字母、数字、下划线,中间不要加空格

<head>
<meta charset="UTF-8">
<title>css选择器title>
<style>
/*标签选择器:只可以描述共性,不可以个性*/
p{
color: lightcoral;
}
#p3{
color: aquamarine;
background-color: lightgreen;
}
style>
head>
<body>
<div>
<p>我是段落1p>
<p>我是段落2p>
<p id="p3">我是段落3p>
div>

<div>
<p>我是段落4p>
<p>我是段落5p>
<p id="p3">我是段落6p>
div>
body>

4.3 类选择器

一个Id一个id的写样式过于麻烦->类选择器
特点:
1)类名可以重复
2)可以给页面上面任意标签命名
3)选择符是点(.)
4)标签可以同时属于多个类
5)类名的顺序class=”c2 c1”跟样式无关,依然取决于head中的代码先后顺序(根据样式存在的位置顺序)

.c1{    
    ...
}
<head>
<meta charset="UTF-8">
<title>css选择器title>
<style>
/*标签选择器:只可以描述共性,不可以个性*/
p{
color: lightcoral;
}
#p3{
color: aquamarine;
background-color: lightgreen;
}
.c2 {
text-decoration: underline;
font-size: 10px;
}
.c1{
font-size: 100px;
}

style>
head>
<body>
<div>
<p>我是段落1p>
<p class="c1 c2" >我是段落2p>
<p id="p3">我是段落3p>
div>

<div>
<p class="c1">我是段落4p>
<p>我是段落5p>
<p id="1">我是段落6p>
div>

body>

4.4 id和类的选择

什么时候用类,什么时候用Id
类上样式(css)
id上行为(js)

4.5 基础选择器的层级关系

权重关系
id选择器>类选择器>标签名>通配符


<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
#i1{
color: orange;
}
.c1{
color: green;
}
p{
color: red;
}
*{
/*body是贯穿整个页面的*/
/*background-color: red;*/
color: purple;
}
style>
head>
<body>
<p class="c1" id = i1>段落1p>
<p>段落2p>
<p class="c1">段落3p>
<p>段落4p>
<p>段落5p>

body>

4.6 后代选择器

1)后代描述的是一种共性,一种平衡
2)当要把某个元素下面的所有后代元素添加样式的时候,可以用后代选择器
3)后代选择器中间有空格

 .c1 p{
            color: red;
        }
        /*假设.c1权重为10,p权重为1,则它的权重为11*/
        .c1 {
            color: red;
        }
        /*它的权重为10*/

.

4.7 交集选择器

特点:
1)选择的是 有个h1标签,起了一个title1的别名,描述的一种元素,不存在任何层级关系
2)交集选择器中间没有空格

h1.title1{
text-decoration: underline;
}

4.8 并集选择器

多个标签共享一个样式
用逗号

特点:
1)并集选择器 选择两者或两者以上的元素
2)写法上 中间用逗号

<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/**{*/
/*color: lightblue;*/
/*background-color: yellow;*/
/*font-size: 30px;*/
/*}*/
/*多个标签共享一个样式*/
li,p,span{
color: lightblue;
background-color: yellow;
font-size: 30px;
}
style>
head>
<body>
<ul>
<li>我是列表li>
<li>我是列表li>
<li>我是列表li>
ul>
<p>我是段落p>
<span>我是范围span>
body>

你可能感兴趣的:(web)